Webpack4如何拆分Vendors与Polyfills？Webpack3配置迁移问询

嘿，我明白你要的效果——把polyfills单独保留为完整chunk，同时从main里拆分出第三方依赖到vendor，还要支持tree shaking对吧？Webpack4已经废弃了CommonsChunkPlugin，改用optimization.splitChunks来实现代码拆分，下面是对应你需求的配置方案：

核心配置示例 #

首先你的入口配置保持不变：

entry: {
  main: './src/main.js',
  polyfills: './src/polyfills.js'
}

然后在optimization字段里配置splitChunks，对应原来的两个CommonsChunkPlugin逻辑：

module.exports = {
  // ...其他配置
  mode: 'production', // 开启生产环境优化，包括tree shaking
  optimization: {
    splitChunks: {
      cacheGroups: {
        // 保持polyfills chunk完整，不参与拆分
        polyfills: {
          name: 'polyfills',
          test: /polyfills/, // 匹配polyfills入口
          chunks: 'initial',
          enforce: true // 强制创建该chunk，忽略其他拆分规则
        },
        // 从main chunk中拆分node_modules依赖到vendor
        vendor: {
          name: 'vendor',
          test: /[\\/]node_modules[\\/]/, // 匹配第三方依赖
          chunks: 'main', // 只针对main chunk提取
          enforce: true
        }
      }
    }
  }
};

配置说明 #

• polyfills chunk：通过enforce: true强制创建独立chunk，确保polyfills的代码不会被拆分或合并到其他chunk里，和你原来第一个CommonsChunkPlugin的效果完全一致。
• vendor chunk：指定只从main chunk中提取node_modules下的代码，实现把第三方依赖从main中拆分出来的目的，对应原来第二个CommonsChunkPlugin的逻辑。
• tree shaking支持：只要你把mode设为production，Webpack会自动开启tree shaking优化，移除未使用的模块代码，和Webpack3的效果一致。

这样配置后，你就能得到三个独立的chunk：polyfills.js（完整的polyfill代码）、vendor.js（第三方依赖）、main.js（业务代码），完美复刻你在Webpack3中的拆分效果~

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