Webpack 是一个现代化的前端构建工具，它可以将多个 JavaScript 模块打包成一个或多个文件，以提高页面性能和开发效率。其中，CommonsChunkPlugin 是 Webpack 中一个非常重要的插件，它可以将多个入口模块中的共同代码提取出来，形成一个公共的 chunk，以减小代码体积，提高页面加载速度。
什么是 CommonsChunkPlugin
CommonsChunkPlugin 是 Webpack 提供的一个插件，用于提取多个入口模块中的共同代码，形成一个公共的 chunk。它的作用是将多个页面共用的代码提取出来，避免代码重复，减小文件体积，提高页面加载速度。
使用 CommonsChunkPlugin
CommonsChunkPlugin 的使用非常简单，只需要在 Webpack 配置文件中添加如下代码即可：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
------ -
------ -----------------
------ -----------------
------ ----------------
--
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------------------------
----- --------
--
-
--上面的代码中，我们定义了三个入口模块 page1.js、page2.js 和 page3.js，它们分别对应三个页面。然后，我们使用 CommonsChunkPlugin 来提取它们共同的代码，形成一个名为 common 的公共 chunk。
CommonsChunkPlugin 的参数
CommonsChunkPlugin 有多个参数，下面我们来逐一介绍。
name
name 参数用于指定公共 chunk 的名称，可以是一个已有的 chunk 名称，也可以是一个新的名称。如果省略该参数，则默认将公共 chunk 命名为 commons。
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
})filename
filename 参数用于指定公共 chunk 的文件名，可以包含 [name]、[id]、[hash] 等占位符。如果省略该参数，则默认将公共 chunk 打包为 common.js。
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'common.[hash].js'
})chunks
chunks 参数用于指定需要提取公共代码的入口模块，可以是一个字符串或字符串数组。如果省略该参数，则默认将所有入口模块中的共同代码提取出来。
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
chunks: ['page1', 'page2']
})minChunks
minChunks 参数用于指定一个模块被多少个入口模块所共用时，才会被提取出来。如果省略该参数，则默认将所有模块中被两个或以上入口模块所共用的代码提取出来。
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks: 2
})children
children 参数用于指定是否将公共 chunk 的依赖关系向下延伸至子级 chunk。如果省略该参数，则默认不向下延伸。
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
children: true
})示例代码
下面是一个完整的 Webpack 配置文件示例，其中包含了 CommonsChunkPlugin 的使用：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
-------------- - -
------ -
------ -----------------
------ -----------------
------ ----------------
--
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- -------------------------------------
----- ---------
--------- -------------------
------- --------- ---------
---------- --
--------- ----
--
-
--总结
CommonsChunkPlugin 是 Webpack 中一个非常重要的插件，它可以将多个入口模块中的共同代码提取出来，形成一个公共的 chunk，以减小代码体积，提高页面加载速度。在使用 CommonsChunkPlugin 时，我们需要注意其参数的含义和作用，以便更好地控制公共代码的提取。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65db392c1886fbafa4845c7e