Webpack3升级至V4：CommonsChunkPlugin替换为SplitChunksPlugin适配问题

你遇到的问题是splitChunks配置缺少必要的提取限制规则导致的，Webpack4中CommonsChunkPlugin被废弃后，splitChunks有内置的默认提取逻辑，未显式配置限制规则的情况下会命中所有模块，导致common.bundle.js包含全部入口代码。

正确适配配置 #

optimization: {
  splitChunks: {
    // 关闭Webpack默认的公共提取规则，避免自定义规则被覆盖
    default: false,
    defaultVendors: false,
    cacheGroups: {
      common: {
        name: 'common',
        filename: 'common.bundle.js',
        chunks: 'all',
        // 核心配置：仅提取被至少2个入口引用的模块，和旧版CommonsChunkPlugin默认逻辑一致
        minChunks: 2,
        // 调高规则优先级，确保优先命中
        priority: 10,
        // 可选：忽略默认30KB最小体积限制，小体积公共模块也会被提取
        enforce: true,
        // 可选：仅提取src下的业务公共代码，排除node_modules第三方依赖
        // test: /[\\/]src[\\/]/
      }
    }
  }
}

配置参数说明 #

• minChunks: 2：控制模块被多少个入口引用才会被提取，是实现需求的核心参数，设为2即可匹配旧版CommonsChunkPlugin的默认提取逻辑
• default: false、defaultVendors: false：关闭Webpack内置的默认提取规则，避免和自定义的common规则冲突
• priority: 10：调高当前规则的优先级，确保优先执行自定义的公共代码提取逻辑
• enforce: true：Webpack默认仅提取体积大于30KB的公共模块，加上该配置可以忽略体积限制，所有符合引用次数要求的模块都会被提取
• test: /[\\/]src[\\/]/：可选配置，如果你需要单独打包第三方依赖，加上该规则可以仅提取src目录下的业务公共代码，不会把node_modules中的依赖打包进common.bundle.js

可选拓展：单独提取第三方依赖 #

如果你需要把node_modules中的第三方公共依赖单独打包，只需要在cacheGroups下新增一个vendors规则即可：

cacheGroups: {
  vendors: {
    name: 'vendors',
    filename: 'vendors.bundle.js',
    test: /[\\/]node_modules[\\/]/,
    chunks: 'all',
    priority: 20,
    enforce: true
  },
  common: {
    // 上文的common配置保持不变
  }
}

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