package.json
{ "name": "webpack-scaffold", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "css-loader": "^0.28.7", "file-loader": "^1.1.5", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack": "^3.10.0", "webpack-dev-server": "^2.9.7" }}测试环境
build/dev.js
var webpack = require("webpack");var config = require("../config/config.dev.js");var WebpackDevServer = require('webpack-dev-server');/* ======================================== method 1 ======================================== *//*config.entry.unshift("webpack/hot/dev-server");config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");var compiler = webpack(config);var server = new WebpackDevServer(compiler, { hot: true,publicPath:"/",contentBase:"../dist"});*//* ======================================== method 2 ======================================== */var options = {contentBase: '../dist',hot: true,host: 'localhost',port:8080};WebpackDevServer.addDevServerEntrypoints(config, options);var compiler = webpack(config);var server = new WebpackDevServer(compiler, options);server.listen(8080);config/config.dev.js
var HtmlWebpackPlugin = require("html-webpack-plugin");var CleanWebpackPlugin = require("clean-webpack-plugin");var path = require("path");var webpack = require('webpack');var distDirName = "dist";var distDir = "../"+distDirName;var outputJsFileName = "result.js";var outputHtmlFileName = "app.html";var templateHtmlPath = "../template.html";var entryFilePath = "../js/app.js";var webpackConfig = {entry: [entryFilePath],output: {path: path.resolve(__dirname, distDir),filename: outputJsFileName},resolveLoader:{// modules:["../../../npm_repository/node_modules"]/* loader resolve 查找loaders */// modules:["node_modules","/workspace/npm_repository/node_modules"] },devServer: {hot: true,contentBase: distDir},module: {rules: [{test: /\.(png|jpg|gif)$/,use: [{loader: "url-loader",options: {limit: 8192 // 小于这个尺寸的变成base64} }]},{test: /\.css$/,use: ["style-loader", "css-loader"]// use: ["style-loader/url", "file-loader"]}]},plugins: [new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(),// new CleanWebpackPlugin([distDirName],{// root:path.resolve(__dirname,"../")// }),new HtmlWebpackPlugin({filename:outputHtmlFileName,template:templateHtmlPath})]};module.exports = webpackConfig;生产环境
build/build.js
var webpack = require("webpack");var config = require("../config/config.product.js");var compiler = webpack(config);console.log("start building ...");compiler.run(function(error,status){if(error){console.log(error);return;}console.log(status.toString());});config/config.product.js
var HtmlWebpackPlugin = require("html-webpack-plugin");var CleanWebpackPlugin = require("clean-webpack-plugin");var path = require("path");var webpack = require('webpack');var distDirName = "dist";var distDir = "../"+distDirName;var outputJsFileName = "result.js";var outputHtmlFileName = "app.html";var templateHtmlPath = "../template.html";var entryFilePath = "../js/app.js";var webpackConfig = {entry: entryFilePath,output: {path: path.resolve(__dirname, distDir),filename: outputJsFileName},resolveLoader:{// modules:["../../../npm_repository/node_modules"]/* loader resolve 查找loaders */// modules:["node_modules","/workspace/npm_repository/node_modules"] },module: {rules: [{test: /\.(png|jpg|gif)$/,use: [{loader: "url-loader",options: {limit: 8192 // 小于这个尺寸的变成base64} }]},{test: /\.css$/,use: ["style-loader", "css-loader"]// use: ["style-loader/url", "file-loader"]}]},plugins: [new CleanWebpackPlugin([distDirName],{root:path.resolve(__dirname,"../")}),new HtmlWebpackPlugin({filename:outputHtmlFileName,template:templateHtmlPath})]};module.exports = webpackConfig;html-webpack-plugin使用的模板文件template.html
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>App</title></head><body> <div id="app"> <div> <em></em> <div>小麻团</div> </div><!-- user-info --> </div><!-- app --></body></html>
app.js
import style from "../css/app.css";console.log("this is the index js .");app.css
html,body{ height:100%; margin:0; padding:0;}#app{ position:relative; min-height: 100%; background-color:#f3f3f3;}#app .user-info{position:relative;height:60px;padding-left:60px;}#app .user-info .user-logo{position:absolute;left:10px;top:0;bottom:0;width:40px;height:40px;border-radius: 20px;background:url(../images/pic.jpg) center center;background-size:cover;margin:auto;}#app .user-info .user-name{height:100%;line-height: 60px;font-size:14px;color:#8592a3;}simple webpack 脚手架初稿
原文地址：http://blog.51cto.com/antlove/2059695