## 提取公共代码
想象一下，我们的主文件，原来的`bundle.js`里面是不是包含了`react`，`redux`，`react-router`等等
这些代码？？这些代码基本上不会改变的。但是，他们合并在`bundle.js`里面，每次项目发布，重新请求`bundle.js`的时候，相当于重新请求了`react`等这些公共库。浪费了~
我们把`react`这些不会改变的公共库提取出来，用户缓存下来。从此以后，用户再也不用下载这些库了，无论是否发布项目。嘻嘻。
`webpack`文档给了教程，看[这里](https://doc.webpack-china.org/guides/caching#-extracting-boilerplate-)
`webpack.dev.config.js`
~~~
const webpack = require('webpack')
// 入口
// entry: [
// 'react-hot-loader/patch',
// path.join(__dirname, 'src/index.js')
// ],
entry: {
app: [
'react-hot-loader/patch',
path.join(__dirname, 'src/index.js')
],
// 把react等库生成打包到vendor.hash.js里面去。
vendor: ['react', 'react-router-dom', 'redux', 'react-dom', 'react-redux']
},
// ...省略部分代码
// 定义webpack插件
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, 'src/index.html')
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
})
]
~~~
但是你现在可能发现编译生成的文件`app.[hash].js`和`vendor.[hash].js`生成的hash一样的，这里是个问题，因为呀，你每次修改代码,都会导致`vendor.[hash].js`名字改变，那我们提取出来的意义也就没了。其实文档上写的很清楚：
~~~
output: {
path: path.join(__dirname, './dist'),
filename: '[name].[hash].js', // 文档这里应该用的是chunkhash 替换 掉 hash的
}
~~~
但是如果用`chunkhash`，会报错，因为和`webpack-dev-server --hot`不兼容，具体看[这里](https://github.com/webpack/webpack-dev-server/issues/377)。
所以我们就不用`webpack-dev-server`，因为生产环境根本用不到这个包，所以下面我们来配置生产环境。
