React使用react-app-rewired修改build目录static文件夹存放路径

你当前只配置了JS文件的输出路径，还需要额外修改CSS文件、媒体资源（图片、字体等）的webpack输出规则，完整配置如下：

module.exports = function override(config, env) {
    // 调整JS文件输出路径
    config.output = {
        ...config.output,
        filename: "assets/static/js/[name].js",
        chunkFilename: "assets/static/js/[name].chunk.js",
    };

    // 调整CSS文件输出路径（仅生产环境生效）
    const cssPlugin = config.plugins.find(
        plugin => plugin.constructor.name === 'MiniCssExtractPlugin'
    );
    if (cssPlugin) {
        cssPlugin.options.filename = "assets/static/css/[name].css";
        cssPlugin.options.chunkFilename = "assets/static/css/[name].chunk.css";
    }

    // 调整媒体资源（图片、字体等）输出路径
    config.module.rules.forEach(rule => {
        if (!rule.oneOf) return;
        rule.oneOf.forEach(item => {
            if (item.type === 'asset/resource') {
                item.generator.filename = 'assets/static/media/[name].[hash][ext]';
            }
        })
    })

    return config;
};

注意事项 #

• 上述配置适配 Create React App v5+ 版本（默认基于webpack5的Asset Modules处理静态资源）。如果你使用的是v4及更早版本，需要将媒体资源的调整逻辑替换为匹配file-loader的规则，修改其options.outputPath参数即可。
• 配置修改完成后重新执行npm run build，即可生成build/assets/static目录，包含js、css、media三类静态资源。

内容的提问来源于stack exchange，提问作者Георги Попов