## 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'` 实例之前引入。
