Webpack打包Chunk文件路径异常，如何修改至./build/static/js？

问题出在你直接覆盖了整个config.output对象，这会丢失Webpack默认的Output配置项，同时也没给chunkFilename设置正确的路径前缀。按照下面的方式修改config-overrides.js即可将Chunk文件放入build/static/js目录：

const path = require('path');
const { override } = require('customize-cra');

const adjustOutputPath = (config, env) => {
  // 不直接替换整个output对象，只修改需要的属性
  config.output.filename = 'static/js/[name].[hash:2].js';
  // 给chunkFilename添加static/js/前缀，指定生成路径
  config.output.chunkFilename = 'static/js/[name].[hash:2].chunk.js';
  config.output.path = path.resolve(__dirname, 'build');
  // publicPath根据部署场景调整：根目录用'/'，相对路径用'./'
  config.output.publicPath = '/';
  
  return config;
};

module.exports = {
  webpack: override(adjustOutputPath),
};

关键说明： #

• 不要直接赋值config.output = {}，这会覆盖Webpack默认的Output配置（比如chunk加载逻辑、asset模块相关配置等），只修改需要调整的属性即可
• chunkFilename中的static/js/前缀会让Webpack自动在build目录下创建static/js文件夹，并将Chunk文件生成到该目录内
• filename也同步调整到static/js目录，让主入口JS和Chunk文件统一存放路径，保持项目结构规范
• publicPath设置为'/'适用于部署在域名根目录的情况，如果你的项目部署在子目录（比如https://example.com/my-app/），需要将其改为'/my-app/'或者相对路径'./'

修改完成后重新执行npm run build，就能看到所有Chunk文件都存放在build/static/js目录下了。

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