Webpack 4中如何使用splitChunks强制拆分公共代码块？

嘿，我太懂这种换了新工具却摸不着头脑的挫败感了！之前用CommonChunksPlugin按项目的库结构拆分公共代码顺风顺水，换成splitChunks就卡壳太正常——毕竟这俩的设计逻辑和配置思路差异不小，尤其是默认行为完全不一样。

问题核心：splitChunks的默认配置不匹配你的需求 #

CommonChunksPlugin默认会处理所有入口的公共依赖，但splitChunks默认只针对异步加载的chunk做拆分，而且拆分规则比较保守，这就是你没法直接复刻旧效果的关键原因。要实现按库结构拆分，得针对性调整splitChunks的核心配置，尤其是chunks和cacheGroups。

针对性配置示例（匹配你的库结构设计） #

结合你给出的部分配置，我整理了一个适配按库拆分需求的完整配置片段：

const webpack = require('webpack');
const path = require('path');
const PROD = JSON.parse(process.env.NODE_ENV === 'production' ? 'true' : 'false');

module.exports = {
  entry: {
    // 假设你的项目按业务/库模块设置了多个入口
    app: './src/app.js',
    dashboard: './src/dashboard.js',
    admin: './src/admin.js'
  },
  output: {
    filename: PROD ? '[name].[contenthash].js' : '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  optimization: {
    splitChunks: {
      // 关键：处理所有类型的chunk（同步+异步），和CommonChunksPlugin行为对齐
      chunks: 'all',
      // 可选：如果你的公共块很小也想拆分，调低minSize（默认20KB）
      minSize: 10000,
      cacheGroups: {
        // 拆分第三方依赖库（比如node_modules里的react、vue等）
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: -10, // 优先级低于自定义库，避免冲突
          reuseExistingChunk: true
        },
        // 拆分你项目内的公共工具库
        commonUtils: {
          test: /[\\/]src[\\/]utils[\\/]/,
          name: 'common-utils',
          chunks: 'all',
          minChunks: 2, // 至少被2个入口引用才拆分
          priority: 0,
          reuseExistingChunk: true
        },
        // 拆分你项目内的公共组件库
        commonComponents: {
          test: /[\\/]src[\\/]components[\\/]/,
          name: 'common-components',
          chunks: 'all',
          minChunks: 2,
          priority: 0,
          reuseExistingChunk: true
        },
        // 可以根据你的项目结构继续添加更多分组，比如公共样式、业务基础模块等
      }
    }
  },
  // 其他loader、plugin配置...
};

关键配置点解析 #

• chunks: 'all'：这是最容易踩坑的地方，默认值是async，只处理异步chunk。改成all后才会像CommonChunksPlugin一样处理所有入口的同步公共依赖。
• cacheGroups：这是splitChunks的核心，相当于给不同类型的公共代码设置独立的拆分规则，完全可以对应你按库结构设计的项目。每个分组可以通过test匹配特定路径/文件，name指定输出的chunk名称。
• priority：当某个文件同时符合多个分组规则时，优先级高的分组会优先处理，避免拆分混乱。
• reuseExistingChunk：如果已经有拆分好的chunk包含当前文件，直接复用，避免重复打包。

额外排查点 #

如果调整后还是达不到预期，可以检查这几点：

• 你的公共代码是否满足minChunks（默认1）和minSize的要求，太小的chunk不会被拆分。
• 确认test规则是否准确匹配到了你想要拆分的库路径，比如有没有写错正则表达式。
• 检查入口文件的依赖关系，确保公共代码确实被多个入口引用。

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