如何使用CRACO禁用CRA的file chunking？原有配置未生效

原有配置不生效的原因 #

• CRACO有固定的配置识别规则，只有放在webpack.configure钩子内的修改才会真正注入到实际运行的webpack配置，你之前直接写在配置顶层的output字段属于未被识别的冗余内容，完全不会生效
• CRA默认开启了全场景的代码分块能力，仅修改主bundle的输出文件名，不会改变“拆分多文件输出”的核心逻辑，自然达不到禁用file chunking的效果

可直接复用的完整配置 #

将craco.config.js的内容替换为如下配置即可：

// craco.config.js
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 配置主bundle输出路径
      webpackConfig.output.filename = 'static/js/bundle.js';
      // 所有动态导入生成的chunk统一输出到同一个文件，不生成独立chunk
      webpackConfig.output.chunkFilename = 'static/js/bundle.js';

      // 完全关闭splitChunks公共代码分割逻辑
      webpackConfig.optimization.splitChunks.chunks = 'none';
      // 关闭runtime代码分离，避免单独生成runtime chunk文件
      webpackConfig.optimization.runtimeChunk = false;

      return webpackConfig;
    }
  }
}

生效效果说明 #

• 配置应用后，所有原本会被拆分输出的模块（第三方依赖、动态导入组件、跨模块公共逻辑）都会被合并到单个static/js/bundle.js文件中，不会再生成vendors~main.js、数字编号chunk文件、runtime~main.js这类独立分块文件
• 上述配置同时覆盖开发环境启动和生产构建的分块规则，不需要针对不同环境做单独调整
• 如果配置后仍出现旧分块文件的残留输出，可删除项目下的node_modules/.cache缓存目录，重新执行打包命令即可

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