Webpack4迁移：将两个CommonsChunkPlugin配置转为splitChunks

先帮你拆解下原来两个CommonsChunkPlugin的作用，再对应到Webpack 4的新配置：

原来两个插件的功能 #

1. 第一个插件：new webpack.optimize.CommonsChunkPlugin({ name: 'common', minChunks: Infinity })
   这个配置会创建一个空的common chunk，核心作用是抽离Webpack的运行时代码（runtime）——因为minChunks: Infinity意味着不会把任何业务模块打包进去，只用来承载Webpack的runtime逻辑，避免runtime代码重复出现在其他chunk中。

2. 第二个插件：new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', chunks: ["vendor", "app"], minChunks: 2 })
   这个是在指定的vendor和app两个chunk里，把被至少2个chunk共同引用的模块，提取到名为vendor的公共chunk中，减少重复打包。

Webpack 4的对应配置 #

在Webpack 4中，你需要通过optimization.splitChunks（替代原CommonsChunkPlugin的公共模块提取）和optimization.runtimeChunk（处理runtime抽离）来实现相同效果，完整配置如下：

module.exports = {
  // ...其他配置（entry、output等）
  optimization: {
    // 对应第一个CommonsChunkPlugin：抽离runtime到common chunk
    runtimeChunk: {
      name: 'common'
    },
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        // 对应第二个CommonsChunkPlugin：提取vendor和app中共同引用的模块
        vendor: {
          name: 'vendor',
          // 只处理指定的vendor和app两个chunk
          chunks: ['vendor', 'app'],
          // 模块被至少2个指定chunk引用才会被提取
          minChunks: 2,
          // 优先级高于默认缓存组，确保先处理这个规则
          priority: 10,
          // 如果模块已经被打包过，直接复用，避免重复打包
          reuseExistingChunk: true
        }
      }
    }
  }
};

配置说明 #

• runtimeChunk: { name: 'common' }：直接把Webpack的运行时代码单独打包到common chunk中，完全替代原来minChunks: Infinity的那个插件的作用。
• splitChunks.cacheGroups.vendor：
  • chunks: ['vendor', 'app']：限定只在这两个chunk中寻找可提取的模块，和原插件的chunks参数对应。
  • minChunks: 2：要求模块被至少2个指定chunk引用才会被提取，和原插件的minChunks参数一致。
  • priority:10：确保这个缓存组的规则优先于Webpack默认的缓存组执行，避免冲突。

这样配置后，就能和你原来Webpack 2的两个CommonsChunkPlugin实现完全相同的打包效果啦。

内容的提问来源于stack exchange，提问作者Siraj Kakeh