React项目执行npm run build时如何重命名static文件夹

方法一：通过package.json脚本直接重命名（最简单） #

直接在package.json的scripts字段里修改build命令，在构建完成后执行重命名操作：

• Linux/macOS环境：

"build": "react-scripts build && mv build/static build/your-new-folder"

• Windows CMD环境：

"build": "react-scripts build && ren build\\static your-new-folder"

• 跨平台通用（需先安装rename-cli：npm install rename-cli --save-dev）：

"build": "react-scripts build && rename build/static build/your-new-folder"

方法二：用react-app-rewired修改webpack配置（无需eject） #

如果你的项目是用Create React App创建且不想执行eject，可以通过react-app-rewired修改webpack输出配置，直接指定静态资源的文件夹名：

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录创建config-overrides.js文件，写入以下内容（替换your-new-folder为目标名称）：

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

module.exports = override(
  adjustWebpack((config) => {
    // 修改JS、图片等资源的输出路径
    config.output.assetModuleFilename = 'your-new-folder/[hash][ext][query]';
    config.output.chunkFilename = 'your-new-folder/js/[name].[contenthash:8].chunk.js';
    config.output.filename = 'your-new-folder/js/[name].[contenthash:8].js';
    
    // 修改CSS资源的输出路径
    const cssPlugin = config.plugins.find(plugin => plugin.constructor.name === 'MiniCssExtractPlugin');
    if (cssPlugin) {
      cssPlugin.options.filename = 'your-new-folder/css/[name].[contenthash:8].css';
      cssPlugin.options.chunkFilename = 'your-new-folder/css/[name].[contenthash:8].chunk.css';
    }
    return config;
  })
);

3. 更新package.json里的脚本命令：

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"

方法三：已eject项目直接修改webpack配置 #

如果已经执行过npm run eject，直接修改项目根目录下config/webpack.config.js的对应配置：

• 找到output对象，将其中filename、chunkFilename、assetModuleFilename里的static替换为目标文件夹名；
• 找到MiniCssExtractPlugin的配置项，修改filename和chunkFilename里的路径，替换static为目标名称。

注意事项 #

修改后无需手动调整public/index.html，webpack会自动更新生成的build/index.html里的资源引用路径。

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