webpack-CommonsChunkPlugin

官方文档：

CommonsChunkPlugin

new webpack.optimize.CommonsChunkPlugin(options)

• options.name or options.names (string|string[]): The chunk name of the commons chunk. An existing chunk can be selected by passing a name of an existing chunk. If an array of strings is passed this is equal to invoking the plugin multiple times for each chunk name. If omitted and options.async or options.children is set all chunks are used, otherwise options.filename is used as chunk name.

公共块的块名称。可以通过传递现有块的名称来选择现有块。如果传递一个字符串数组，这等于为每个块名称多次调用插件，如果省略并且options.async或options.children设置为使用所有块，则使用options.filename作为块名。

• options.filename (string): The filename template for the commons chunk. Can contain the same placeholder as output.filename. If omitted the original filename is not modified (usually output.filename or output.chunkFilename).

公共块的文件名。可以包含与output.filename相同的占位符。如果省略，原始文件名不会被修改(一般是output.filename or output.chunkFilename).

• options.minChunks (number|Infinity|function(module, count) -> boolean): The minimum number of chunks which need to contain a module before it's moved into the commons chunk. The number must be greater than or equal 2 and lower than or equal to the number of chunks. Passing Infinity just creates the commons chunk, but moves no modules into it. By providing a function you can add custom logic. (Defaults to the number of chunks)

在模块移动到公共块之前需要包含该模块的块的最小数量。该数字必须大于或等于2且小于或等于块的数量，设置为Infinity只是创建公共块，但不移动模块。通过提供一个函数，你可以添加自定义逻辑

• options.chunks (string[]): Select the source chunks by chunk names. The chunk must be a child of the commons chunk. If omitted all entry chunks are selected.

按块名称选择源块。块必须是公共块的子节点。如果省略，则选择所有块

• options.children (boolean): If true all children of the commons chunk are selected

如果为true，则选择公共块的所有子块（当存在code splitting的时候，入口chunk会存在多个子chunk，子chunk之间也会存在重复的引用模块，如果该选项为true，则子chunk会将公共模块提取到入口模块当中去）

• options.async (boolean|string): If true a new async commons chunk is created as child of options.name and sibling of options.chunks. It is loaded in parallel with options.chunks. It is possible to change the name of the output file by providing the desired string instead of true.

假如设置为true一个新的异步commons chunk被创建为options.name的子块和options.chunks的兄弟块。它与options.chunks并行加载。可以通过提供所需的字符串而不是true来更改输出文件的名称。

• options.minSize (number): Minimum size of all common module before a commons chunk is created.

创建公共块之前所有公共模块的最小大小

解读

• 这个插件主要是用来创建的chunk中提取公共的模块单独打包，所以主要用来做两件事情：单独打包公共模块以及分离第三方依赖库。
• 打包第三方依赖库的原理就是options.name可以选择现有的chunk，entry中将所有的第三方依赖库放入vendor中，把minChunks设置为Infinity，其他的共有模块就打不进来，这个vendor就作为一个公共模块单独出来了

案例

打包多个公共模块

pageA.js

require("./modules/a-b-c");
require("./modules/a-b");
require("./modules/a-c");

pageB.js

require("./modules/a-b-c");
require("./modules/a-b");
require("./modules/a-c");

pageC.js

require("./modules/a-b-c");
require("./modules/a-b");
require("./modules/b-c");

adminPageA.js

require("./modules/a-b-c");
require("./modules/admin");

adminPageB.js

require("./modules/a-b-c");
require("./modules/admin");

adminPageC.js

require("./modules/a-b-c");
require("./modules/admin");

webpack.config.js

var path = require("path");
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        pageA: "./pageA",
        pageB: "./pageB",
        pageC: "./pageC",
        adminPageA: "./adminPageA",
        adminPageB: "./adminPageB",
        adminPageC: "./adminPageC",
    },
    output: {
        path: path.join(__dirname, "js"),
        filename: "[name].js"
    },
    plugins: [
        new CommonsChunkPlugin({
            name: "admin-commons",
            chunks: ["adminPageA", "adminPageB"]
        }),
        new CommonsChunkPlugin({
            name: "commons",
            chunks: ["pageA", "pageB", "admin-commons"],
            minChunks: 2
        }),
        new CommonsChunkPlugin({
            name: "c-commons",
            chunks: ["pageC", "adminPageC"]
        }),
    ]
}

info

Hash: 295aa8d9fd845ec1d1b0
Version: webpack 2.2.0-rc.2
           Asset       Size  Chunks             Chunk Names
        pageC.js  768 bytes       0  [emitted]  pageC
        pageB.js  567 bytes       1  [emitted]  pageB
        pageA.js  567 bytes       2  [emitted]  pageA
   adminPageC.js  544 bytes    3, 4  [emitted]  adminPageC
admin-commons.js  233 bytes       4  [emitted]  admin-commons
   adminPageB.js  337 bytes       5  [emitted]  adminPageB
   adminPageA.js  337 bytes       6  [emitted]  adminPageA
      commons.js       6 kB    7, 8  [emitted]  commons
    c-commons.js    5.76 kB       8  [emitted]  c-commons
Entrypoint pageA = commons.js pageA.js
Entrypoint pageB = commons.js pageB.js
Entrypoint pageC = c-commons.js pageC.js
Entrypoint adminPageA = commons.js admin-commons.js adminPageA.js
Entrypoint adminPageB = commons.js admin-commons.js adminPageB.js
Entrypoint adminPageC = c-commons.js adminPageC.js

---

同时打包公共模块和vendor

有如下依赖：

• pageA
• utility1
• utility2
• pageB
• utility2
• utility3
• pageC
• utility2
• utility3

最终想产生这样的包关系

• vendor
• webpack runtime
• vendor1
• vendor2
• common
• utility2
• utility3
• pageA
• pageA
• utility1
• pageB
• pageB
• pageC
• pageC

webpack.config.js

var path = require("path");
var CommonsChunkPlugin = require("../../lib/optimize/CommonsChunkPlugin");

module.exports = {
    entry: {
        vendor: ["./vendor1", "./vendor2"],
        pageA: "./pageA",
        pageB: "./pageB",
        pageC: "./pageC"
        // older versions of webpack may require an empty entry point declaration here
        // common: []
    },
    output: {
        path: path.join(__dirname, "js"),
        filename: "[name].js"
    },
    plugins: [
        new CommonsChunkPlugin({
            // The order of this array matters
            names: ["common", "vendor"],
            minChunks: 2
        })
    ]
};

原理就是names: ["common", "vendor"]会将公共的部分打包进common然后再将第三方依赖库放进vendor中

其中有三个个疑问：

• common在打包的时候会不会将vendor的chunk事先排除在外
• vendor在打包的时候会将已经打好包的common排除在外
• minChunks等参数对common、vendor是否都有效

---

刚刚考虑一下，觉得上面的问题有了答案：

• 第一个不会，官网意思很明确“如果传递一个字符串数组，这等于为每个块名称多次调用插件”，所以相当于是设置了两个CommonsChunkPlugin，但是否存在vendor打包进common（pageA等可能引用vendor，但是vendor不会引用自身，故不存在公共模块，肯定不会打进common），当name值和entry入口相同的时候（vendor），此时就是取到抽离chunk的目的。
• 第二个其实chunks为[vendor, pageA, pageB, pageC,common]
• 第三个应该是对的

---

参考

1. 官网说明
2. webpack/examples
3. 知乎-怎么分别打包第三方库，公用组件和业务代码