Webpack3.x 的 CommonChunkPlugin 用法详解

随着项目的不断深入，对于 webpack 的配置也会不断地改动和查阅。本文将再次记录 CommonChunkPlugin 的用法，供个人查阅，希望对你有帮助。

1. name 和 names

• a. 如果 name 的值不与任何已存在的 chunk 相同 ，则会从 options.chunks 中提取一个或多个 chunk，将公共模块提取到一个新的 chunk。
• b. 如果 name 的值与已存在的 chunk 相同 ，则会将公共模块提取到现有的 chunk。

2. chunks

• a. 选项类型：数组 。
• b. 默认值：[] 。
• c. 用法 ：指定需要提取公共模块的 chunk。
• d. 示例 ：

new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  chunks: ['a', 'b']
});

• 说明 ：上面的配置会将 chunk a 和 chunk b 中的公共模块提取到一个名为 common 的 chunk。

3. minChunks

• a. 选项类型：数字 。
• b. 默认值：2 。
• c. 用法 ：指定公共模块至少被多少个 chunk 引用才会被提取到公共 chunk。
• d. 示例 ：

new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  chunks: ['a', 'b'],
  minChunks: 3
});

• 说明 ：上面的配置会将 chunk a 和 chunk b 中的公共模块提取到一个名为 common 的 chunk，前提是这些公共模块至少被 3 个 chunk 引用。

4. children

• a. 选项类型：布尔值 。
• b. 默认值：false 。
• c. 用法 ：指定是否提取子 chunk 的公共模块。
• d. 示例 ：

new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  chunks: ['a', 'b'],
  children: true
});

• 说明 ：上面的配置会将 chunk a 和 chunk b 的公共模块提取到一个名为 common 的 chunk，同时也会提取子 chunk 的公共模块。

5. async

• a. 选项类型：布尔值 。
• b. 默认值：false 。
• c. 用法 ：指定是否提取异步 chunk 的公共模块。
• d. 示例 ：

new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  chunks: ['a', 'b'],
  async: true
});

• 说明 ：上面的配置会将 chunk a 和 chunk b 的公共模块提取到一个名为 common 的 chunk，同时也会提取异步 chunk 的公共模块。

6. filename

• a. 选项类型：字符串 。
• b. 默认值：[name].js 。
• c. 用法 ：指定公共 chunk 的文件名。
• d. 示例 ：

new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  chunks: ['a', 'b'],
  filename: 'common.js'
});

• 说明 ：上面的配置会将 chunk a 和 chunk b 的公共模块提取到一个名为 common.js 的公共 chunk。

7. minSize

• a. 选项类型：数字 。
• b. 默认值：0 。
• c. 用法 ：指定公共 chunk 的最小大小。
• d. 示例 ：

new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  chunks: ['a', 'b'],
  minSize: 10000
});

• 说明 ：上面的配置会将 chunk a 和 chunk b 的公共模块提取到一个名为 common 的公共 chunk，前提是这个公共 chunk 的大小至少为 10000 字节。

8. maxAsyncRequests

• a. 选项类型：数字 。
• b. 默认值：5 。
• c. 用法 ：指定异步 chunk 的最大请求数。
• d. 示例 ：

new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  chunks: ['a', 'b'],
  maxAsyncRequests: 3
});

• 说明 ：上面的配置会将 chunk a 和 chunk b 的公共模块提取到一个名为 common 的公共 chunk，同时也会提取异步 chunk 的公共模块，但异步 chunk 的最大请求数不能超过 3。

9. maxInitialRequests

• a. 选项类型：数字 。
• b. 默认值：3 。
• c. 用法 ：指定初始 chunk 的最大请求数。
• d. 示例 ：

new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  chunks: ['a', 'b'],
  maxInitialRequests: 2
});

• 说明 ：上面的配置会将 chunk a 和 chunk b 的公共模块提取到一个名为 common 的公共 chunk，同时也会提取异步 chunk 的公共模块，但初始 chunk 的最大请求数不能超过 2。