详细的配置可以参考官网：https://doc.webpack-china.org/guides/
一开始做项目时都是直接从组里前辈搭建好的脚手架开始写代码，到后来自己写新项目时又是拷贝之前的工程作为脚手架开始。对于脚手架本身却不甚了解，不仅不思考为什么更是没有改进的想法，怪不得工作满一年了却总觉得自己的技术水平在原地踏步，就是没有总结和思考。
目前组里的技术栈都是使用vue+koa，使用webpack的好处一是方便写vue的单文件组件，二是打包文件方便生产部署再加上能无所顾虑的应用语言的新特性。
1. 配置文件
官方文档推荐写webpack配置文件时，先写出一个基本配置文件包含入口、输出等，再根据开发/生产环境所需要插件的不同，利用webpack-merge生成两个配置文件。
package.json 依赖参考
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"css-loader": "^0.28.4",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"style-loader": "^0.18.2",
"vue-loader": "^13.0.0",
"webpack": "^3.0.0",
"webpack-chunk-hash": "^0.4.0",
"webpack-dev-server": "^2.5.0",
"webpack-manifest-plugin": "^1.1.2",
"webpack-merge": "^4.1.0"
}
webpack.config.base.js
1 const path = require(‘path‘);
2 const webpack = require(‘webpack‘);
3 const WebpackManifestPlugin = require("webpack-manifest-plugin");
4 const WebpackChunkHash = require("webpack-chunk-hash");
5
6 module.exports = {
7 entry: {
8 index: ‘./app/src/index.js‘,
9 },
10 output: {
11 path: path.resolve(__dirname, ‘..‘, ‘app‘, ‘public‘, ‘js‘)
12 },
13 resolve: {
14 alias: {
15 ‘vue$‘: path.resolve(__dirname, ‘../node_modules/vue/dist/vue.js‘),
16 }
17 },
18 module: {
19 loaders: [
20 {
21 test: /\.vue$/,
22 loader: ‘vue-loader‘,
23 },
24 {
25 test: /\.js$/,
26 exclude: /node_modules/,
27 loader: ‘babel-loader‘,
28 },
29 {
30 test: /\.css$/,
31 use: [ ‘style-loader‘, ‘css-loader‘ ]
32 },
33 {
34 test: /\.less$/,
35 loader: "style!css!less"
36 }
37 ]
38 },
39 plugins: [
40 new WebpackManifestPlugin(),
41 new webpack.optimize.CommonsChunkPlugin({
42 name: ‘vendor‘,
43 minChunks: function (module) {
44 // this assumes your vendor imports exist in the node_modules directory
45 return module.context && module.context.indexOf(‘node_modules‘) !== -1;
46 }
47 }),
48 //CommonChunksPlugin will now extract all the common modules from vendor and main bundles
49 new webpack.optimize.CommonsChunkPlugin({
50 name: ‘manifest‘ //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
51 }),
52 new WebpackChunkHash(),
53 ],
54 }
第15行代码可以参考这里和这里，默认NPM包导出的是运行时构建，Vue2的运行时构建不支持单文件组件的template
第40行的 WebpackManifestPlugin 作用是将输出文件名保存在文件中 (当输出文件名带 chunkhash 时很有用，参考这里)
第41、49行的 CommonsChunkPlugin 作用是从打包后的 bundle 文件中提取公共模块，将 npm install 的公共模块和业务代码分开，这样浏览器就可以一直缓存公共模块的bundle，参考这里
第52行的 WebpackChunkHash 作用是让文件名的哈希值基于文件内容
webpack.config.dev.js
1 const path = require(‘path‘);
2 const webpack = require(‘webpack‘);
3 const Merge = require(‘webpack-merge‘);
4 const baseConfig = require(‘./webpack.config.base.js‘);
5
6 module.exports = Merge(baseConfig, {
7 output: {
8 filename: ‘[name].js‘,
9 },
10 devtool: ‘#eval-source-map‘,
11 plugins: [
12 new webpack.HotModuleReplacementPlugin()
13 ],
14 devServer: {
15 port: 7002,
16 hot: true
17 }
18 });
第10行设置source-map，方便用浏览器查看源代码
第12、14行主要用于使用下面会提到的webpack-dev-server
webpack.config.prod.js
1 const webpack = require(‘webpack‘);
2 const Merge = require(‘webpack-merge‘);
3 const baseConfig = require(‘./webpack.config.base.js‘);
4
5 module.exports = Merge(baseConfig, {
6 output: {
7 filename: ‘[name].[chunkhash].js‘,
8 },
9 plugins: [
10 new webpack.optimize.UglifyJsPlugin({
11 compress: {
12 warnings: false
13 }
14 })
15 ]
16 });
第10行 UglifyJsPlugin 的作用是压缩、混淆代码
webpack的配置文件自定义程度很高，所以在参考他人配置时最好能弄清楚为什么要这样写
2. webpack-dev-server
在开发过程中另一个重要的东西是 webpack-dev-server，它的作用是当你改动源代码后能自动重新打包，再加上 webpack 的HMR-模块热替换特性，这样改动代码就能直接在浏览器里看到效果，省却了代码手动打包+刷新浏览器的步骤。使用 webpack-dev-server 有 CLI 和 API 两种使用方法。
CLI 也就是我目前所用的方法，需要设置好配置文件，参考上面的 dev 文件中的 HotModuleReplacementPlugin 和 devServer 设置：devServer 的port 为 webpack-dev-server 运行的端口，hot 设置和 HotModuleReplacementPlugin 启用 HMR。启动的命令为：
node_modules/.bin/webpack-dev-server --config ./config/webpack.config.dev.js
然后通过 http://localhost:7002/index.js 就能获取到打包后对应的文件内容，注意文件是在内存，端口和文件名参考配置文件。
要想在网页中引用打包后的文件可以通过后端使用 nunjucks 之类的模板将文件地址注入到网页中，这里有好几个需要注意的地方。
一个是打包后的 bundle 文件需要注意引入的顺序，公共模块文件要先引入进来，我的开发环境引入顺序为：
<script src="http://localhost:7002/manifest.js"></script> <script src="http://localhost:7002/vendor.js"></script> <script src="http://localhost:7002/index.js"></script>
否则会报 ReferenceError: webpackJsonp is not defined 错误
二是注意要有 .babelrc 文件：
{
"presets": ["es2015"]
}
否则会报 SyntaxError: Unexpected token: name (xxxxxx) from Uglify plugin 之类的错误，无法识别语言新特性
三是在生成环境中，由于输出文件的文件名带 chunkhash，会随着文件内容的改变而改变，所以需要在后端读取 manifest.json 文件的内容，并将文件名通过 nunjucks 之类的模板引擎注入到网页中。当然可以不使用 chunkhash，这样就可以将文件名在网页里写死了，但这样就不方便利用到浏览器的缓存。
3. webpack-dev-middleware
当使用 express、koa 之类的后端框架时可以利用 webpack-dev-middleware，通过中间件来实现热加载。具体使用方法：这里