Webpack 3迁移至4：CommonsChunkPlugin转splitChunks配置失效求调试

我帮你分析下原Webpack 3配置的核心作用，然后修正你当前的Webpack 4配置，解决无法正常工作的问题。

首先，先明确你原Webpack 3中三个CommonsChunkPlugin的职责：

1. vendor chunk：提取node_modules目录下所有被初始chunk引用的JS模块
2. manifest chunk：提取Webpack运行时和模块清单，避免vendor的哈希值因应用代码更新而无意义变化
3. vendor-async chunk：从代码分割的异步chunk中提取被至少3个chunk共享的模块，减少重复打包体积

你的Webpack 4配置主要问题在于manifest的处理方式错误以及没有正确映射原异步共享chunk的逻辑，下面是修正后的完整配置：

const path = require('path');

module.exports = {
  // ...其他Webpack配置
  optimization: {
    // 替代原manifest的CommonsChunkPlugin，提取Webpack运行时到单独chunk
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      chunks: 'all', // 覆盖默认值，处理所有类型的chunk（initial/async/children）
      cacheGroups: {
        // 对应原vendor的CommonsChunkPlugin
        vendor: {
          name: 'vendor',
          test: /[\\/]node_modules[\\/]/, // 匹配node_modules下的模块
          chunks: 'initial', // 只处理初始加载的chunk，和原逻辑一致
          priority: 10, // 优先级高于其他缓存组，确保优先提取
          enforce: true
        },
        // 对应原异步共享chunk的CommonsChunkPlugin（vendor-async）
        'vendor-async': {
          name: 'vendor-async',
          test: /[\\/]node_modules[\\/]/,
          chunks: 'async', // 只处理异步加载的chunk
          minChunks: 3, // 模块至少被3个异步chunk引用才提取
          priority: 5,
          reuseExistingChunk: true // 复用已存在的chunk，避免重复打包
        },
        // 提取应用代码中被至少3个chunk共享的模块（对应原app的CommonsChunkPlugin逻辑）
        common: {
          name: 'app',
          minChunks: 3,
          chunks: 'all',
          priority: 0,
          reuseExistingChunk: true
        }
      }
    }
  }
};

关键修正点说明： #

1. runtimeChunk 替代 manifest 插件：
   Webpack 4中不再通过CommonsChunkPlugin提取运行时，而是通过optimization.runtimeChunk单独配置，这能直接实现原manifest插件的作用，避免vendor哈希值不必要的变化。

2. 拆分vendor和vendor-async缓存组：
   原配置中第三个插件专门处理异步chunk的共享模块，所以在Webpack 4中需要单独创建vendor-async缓存组，指定chunks: 'async'来匹配异步加载的chunk，同时保留minChunks:3的规则。

3. 添加reuseExistingChunk：
   这个配置确保如果某个模块已经被打包到其他chunk中，不会被重复打包到新的chunk里，和原插件的行为一致。

4. 优先级设置：
   给vendor设置更高的优先级，确保node_modules里的模块优先被提取到vendor chunk，而不是被其他缓存组捕获。

调试建议： #

• 安装webpack-bundle-analyzer插件，可视化查看打包后的chunk结构，确认模块是否被正确提取：

  npm install webpack-bundle-analyzer --save-dev
  

  然后在配置中添加：

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  
  module.exports = {
    plugins: [new BundleAnalyzerPlugin()]
  };
  

• 查看Webpack打包日志，留意是否有关于chunk拆分的警告或错误信息，这能帮你定位哪些模块没有按预期被提取。
• 逐步简化配置：先只保留vendor和runtimeChunk，确认这部分正常工作后，再添加vendor-async和common缓存组，逐步排查问题。

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