Webpack CommonsChunk Plugin

CommonsChunk Plugin

Webpack 将每一个module都视为一个‘chunk’， CommonsChunk plugin 的作用时将代码中使用过多次的chunk提取出来作为一个单独的文件，这样，所有的页面都可以有一个公用的chunk

有一个header.js 被三个module（js/home/index.js，js/list/index.js，js/details/index.js）分别引用，header.js内容如下：

`export default class Header {
constructor() {
//TODO...
}`

以下是webpack.config.js

` module.exports = {
entry: {
"home": path.join(__dirname, "js/home/index.js"),
"list": path.join(__dirname, "js/list/index.js"),
"details": path.join(__dirname, "js/details/index.js"),
},
output: {
path: path.resolve(__dirname, "dist"), // string
filename: "[name].js",
},
plugins: [
new CommonsPlugin({
minChunks: 3,
name: "common",
filename: "common.bundle.js"
})
],
};`

minChunks：如果有任何一个模块被引用了>=3次，将会被提取出来作为 common chunk的一部分。

name：clunk 的名称。

filename：最终生成的文件的名称。

我们看运行的结果：



如红色箭头所示，chunk 都生成的对应的js文件，其中deatils，home，list 这三个chunk时通过config中的output配置节输出。common是通过CommonsPlugin中的配置输出。

打开生成的文件，发现common.bundle.js 文件中确实有对Header.js的引用，而其他三个文件中已经将对Header.js的引用移除了。因为header.js 被别的模块引用了3次，根据minChunks的配置，他是需要被提取出来的，你可以把minChunks的配置改成4试试。

下面，在entry中加入一行 common: [“jquery”]：

`  entry: {
"home": path.join(__dirname, "js/home/index.js"),
"list": path.join(__dirname, "js/list/index.js"),
"details": path.join(__dirname, "js/details/index.js"),
common: ["jquery"]
},`

这时再重新生成文件，你会发现common.bundle.js中多了对jquery的引用。请注意在CommonsPlugin中name的配置为 “common”。

终结： 你可以把name理解成chunk的名称，这样， CommonsPlugin的作用就是，首先根据name的配置在entry配置节中找到相同的chunk 名称，会把它提取出来，然后，再将系统中被引用的module大于或等于minChunks的配置的moudle提取出来，这两部分合并成一个module输出，如果配置了filename ，就根据这个配置生成最终的文件名，否则，就根据output中的配置生成最终的文件名。