问题背景
在使用create-react-app创建的React应用中，默认情况下，打包后的静态资源会被放置在static目录下。这对于使用nginx等服务器进行请求转发的部署环境来说，会导致一个问题：请求转发会尝试处理这些打包后的资源，从而引发错误。
解决方案
为了解决这个问题，我们需要修改打包后的目录配置。以下是详细的步骤和代码示例。
步骤1：使用npm run eject
首先，我们需要“弹射”出create-react-app的默认配置。这可以通过运行以下命令完成：
npm run eject
注意：在执行此命令之前，请确保你的Git仓库中没有未提交的文件，因为弹射操作会修改许多文件，可能会造成版本控制的冲突。
步骤2：处理Babel错误
弹射后，可能会出现关于Babel的错误。最快的解决方案是在package.json文件中删除以下配置：
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
步骤3：修改Webpack配置
弹射后，我们会得到许多配置文件，包括Webpack的配置文件。我们需要修改config/webpack.config.js文件中的output配置，以改变打包后的目录结构。
以下是修改后的配置示例：
output: {
filename: isEnvProduction
? 'assets/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'assets/js/bundle.js',
// 如果使用代码分割，还会有额外的JS块文件。
chunkFilename: isEnvProduction
? 'assets/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'assets/js/[name].chunk.js',
assetModuleFilename: 'assets/media/[name].[hash][ext]',
}
通过上述修改，我们可以将打包后的资源放置到不同的目录中，避免与请求转发的static目录冲突。
结论
通过上述步骤，我们可以成功地修改create-react-app打包后的目录，解决因请求转发引起的错误。这种方法虽然需要手动修改配置文件，但提供了更高的灵活性，允许我们根据实际的部署需求调整打包配置。
