重命名src目录后react-scripts构建失败问题求助

问题根源是：Create React App（react-scripts）默认不会读取项目根目录的自定义webpack.config.js，它依赖内置的webpack配置，所以你手动编写的配置不会生效。

下面是几种可行的解决方式：

方法1：通过环境变量指定源码目录 #

Create React App支持通过SRC环境变量指定源码目录，直接修改package.json里的scripts即可：

修改scripts部分：

"scripts": {
  "backend": "dfx deploy backend && env -i scripts/read-env.sh",
  "start": "SRC=frontend react-scripts start",
  "build": "SRC=frontend react-scripts build",
  "test": "SRC=frontend react-scripts test",
  "eject": "react-scripts eject",
  "sources": "mops sources"
}

如果是Windows系统，环境变量写法需要调整：

"start": "set SRC=frontend && react-scripts start",
"build": "set SRC=frontend && react-scripts build"

若需要跨平台兼容（同时支持Windows和Linux/macOS），先安装cross-env：

npm install cross-env --save-dev

再修改scripts：

"start": "cross-env SRC=frontend react-scripts start",
"build": "cross-env SRC=frontend react-scripts build"

方法2：用react-app-rewired覆盖配置（无需eject） #

如果需要更灵活的webpack配置，推荐用react-app-rewired扩展内置配置，无需执行不可逆的eject操作：

1. 安装依赖：

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

2. 修改package.json里的scripts，替换react-scripts为react-app-rewired：

"scripts": {
  "backend": "dfx deploy backend && env -i scripts/read-env.sh",
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject",
  "sources": "mops sources"
}

3. 在项目根目录创建config-overrides.js文件，写入以下内容：

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

module.exports = override(
  // 设置入口文件
  addWebpackEntry('./frontend/index.js'),
  // 添加模块解析路径，让webpack优先查找frontend目录
  addWebpackAlias({
    'src': path.resolve(__dirname, 'frontend')
  })
);

方法3：执行eject（不推荐） #

eject会将react-scripts内置的所有配置暴露到项目中，之后你可以直接修改webpack配置，但缺点是无法再通过react-scripts更新配置：

1. 执行eject命令（操作不可逆，请谨慎执行）：

npm run eject

2. 找到项目根目录下的webpack.config.js，修改入口相关配置：

• 将entry字段里的src/index.js替换为frontend/index.js
• 在resolve.modules中添加path.resolve(__dirname, 'frontend')
• 检查其他引用src的规则（比如module.rules里的文件匹配路径），统一替换为frontend

完成以上任意一种方法后，重新运行npm run build即可正常构建。

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