## CommonsChunkPlugin
[`CommonsChunkPlugin`](https://doc.webpack-china.org/plugins/commons-chunk-plugin) 是 webpack 內置的一個插件，可以用于將模塊分離到單獨的文件中。然而 `CommonsChunkPlugin` 有一個較少有人知道的功能是，能夠在每次修改后的構建結果中，將 webpack 的樣板(boilerplate)和 manifest 提取出來。通過指定 `entry` 配置中未用到的名稱，此插件會自動將我們需要的內容提取到單獨的包中：
在 `conf/webpack.config.js` 中配置:
```
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: '[name].[chunkhash].js'
},
plugins: [
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '..'),
exclude: [],
verbose: true,
dry: false
}),
new HtmlWebpackPlugin({
title: 'Output Management'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
})
]
};
```
### vendor
將第三方庫(library)（例如 `lodash` 或 `react`）提取到單獨的 `vendor` chunk 文件中，是比較推薦的做法，這是因為，它們很少像本地的源代碼那樣頻繁修改。因此通過實現以上步驟，利用客戶端的長效緩存機制，可以通過命中緩存來消除請求，并減少向服務器獲取資源，同時還能保證客戶端代碼和服務器端代碼版本一致。這可以通過使用新的 `entry(入口)` 起點，以及再額外配置一個 `CommonsChunkPlugin` 實例的組合方式來實現：
**webpack.config.js**
```
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
main: './src/main.js',
vendor: [
'lodash'
]
},
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: '[name].[chunkhash].js'
},
plugins: [
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '..'),
exclude: [],
verbose: true,
dry: false
}),
new HtmlWebpackPlugin({
title: 'Output Management'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
})
]
};
```
>[warning] 注意，引入順序在這里很重要。`CommonsChunkPlugin` 的 `'vendor'` 實例，必須在 `'manifest'` 實例之前引入。
