## 提取公共代碼
想象一下，我們的主文件，原來的`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`，因為生產環境根本用不到這個包，所以下面我們來配置生產環境。
