求助：Webpack3 CommonsChunkPlugin迁移至Webpack4 optimization.splitChunks遇阻

我来帮你搞定这个迁移问题！先明确你原配置的核心需求：把第三方依赖（libA、libB）和业务公共代码（./common/下的文件）打包成common chunk，让pageA、pageB等页面入口共享这个公共 chunk。下面是对应Webpack 4的完整迁移方案：

原Webpack 3配置回顾（简化版） #

先确认你原来的配置逻辑：

const path = require('path');
const webpack = require('webpack');

module.exports = function (env) {
  const entry = {
    common: ['libA', 'libB', './common/A.js', './common/B.js', /* ... */],
    pageA: ['./src/pageA/file1.js', './src/pageA/file2.js', /* ... */],
    pageB: ['./src/pageB/file1.js', './src/pageB/file2.js', /* ... */],
    /* ... */
  };
  return {
    entry,
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js'
    },
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        name: 'common',
        chunks: ['pageA', 'pageB'],
        minChunks: 2
      })
    ]
  };
};

迁移后的Webpack 4配置 #

Webpack 4用optimization.splitChunks替代了CommonsChunkPlugin，而且不需要手动把公共代码塞进entry，配置更智能：

const path = require('path');

module.exports = function (env) {
  const entry = {
    pageA: ['./src/pageA/file1.js', './src/pageA/file2.js', /* ... */],
    pageB: ['./src/pageB/file1.js', './src/pageB/file2.js', /* ... */],
    /* ... */
  };

  return {
    entry,
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js'
    },
    optimization: {
      splitChunks: {
        chunks: 'all', // 对同步、异步chunk都生效
        cacheGroups: {
          // 单独提取第三方依赖（libA、libB）
          vendor: {
            test: /[\\/]node_modules[\\/](libA|libB)[\\/]/,
            name: 'vendor',
            priority: 10, // 优先级高于业务公共代码，先提取第三方库
            enforce: true // 强制提取，不受minChunks限制
          },
          // 提取业务公共代码（./common/下的文件）
          common: {
            test: /[\\/]common[\\/]/,
            name: 'common',
            minChunks: 2, // 至少被2个页面引用才提取
            priority: 5,
            reuseExistingChunk: true // 复用已打包的chunk，避免重复打包
          },
          // 可选：提取其他跨页面的公共代码（比如共享组件）
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          }
        }
      },
      runtimeChunk: 'single' // 单独提取webpack runtime代码，优化缓存
    }
  };
};

关键配置解释 #

1. entry简化：不需要再手动把common作为入口，splitChunks会自动识别并提取公共代码，减少冗余配置。
2. splitChunks.chunks: 'all'：Webpack 4推荐的设置，对同步和异步加载的代码都进行分割，覆盖更多场景。
3. cacheGroups分组：
   • vendor组：专门处理第三方依赖，通过test精准匹配libA、libB，高优先级确保第三方代码和业务代码分离。
   • common组：对应你原配置中的业务公共代码目录，minChunks:2保证只有被多个页面共享的代码才会被提取。
   • default组：兜底规则，提取未被上面两组匹配到的跨页面公共代码。
4. runtimeChunk: 'single'：把Webpack的运行时代码单独打包，避免业务代码更新导致runtime缓存失效，这在Webpack 3中需要额外配置CommonsChunkPlugin实现。

可选：合并第三方与业务公共代码 #

如果你想保持原逻辑，把第三方库和业务公共代码打包到同一个common chunk，可以合并配置：

cacheGroups: {
  common: {
    test: /(libA|libB|[\\/]common[\\/])/,
    name: 'common',
    minChunks: 2,
    priority: 10,
    enforce: true
  }
}

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