eject create-react-app后，如何配置生产与开发环境的不同构建脚本？

一、通过package.json配置差异化脚本 #

eject后项目根目录的package.json里的scripts字段可直接修改或新增构建命令，结合环境变量实现差异化：

1. 按需安装环境变量管理工具env-cmd：

npm install env-cmd --save-dev

2. 修改package.json的scripts节点：

"scripts": {
  "start": "react-scripts start",
  "build:dev": "env-cmd -f .env.development react-scripts build",
  "build:prod": "env-cmd -f .env.production react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

• build:dev：触发开发环境构建，自动加载.env.development中的环境变量
• build:prod：触发生产环境构建，自动加载.env.production中的环境变量

二、配置环境变量文件 #

在项目根目录创建两个环境专属的变量文件：

• .env.development（开发环境）：

REACT_APP_API_BASE=http://localhost:3000/api
REACT_APP_BUILD_ENV=development

• .env.production（生产环境）：

REACT_APP_API_BASE=https://your-prod-domain.com/api
REACT_APP_BUILD_ENV=production

注意：变量名必须以REACT_APP_开头，否则不会被React打包注入到项目中。

三、深度自定义：修改Webpack配置 #

eject后项目根目录会生成config文件夹，部分版本会拆分为webpack.config.dev.js和webpack.config.prod.js，可直接针对不同环境修改配置：

1. 编辑开发环境配置config/webpack.config.dev.js：

module.exports = {
  mode: 'development',
  output: {
    path: path.resolve(__dirname, '../build-dev'), // 开发产物单独输出到build-dev目录
    filename: 'static/js/[name].js'
  },
  devtool: 'cheap-module-source-map',
  // 可添加开发专属的插件、loader配置
}

2. 编辑生产环境配置config/webpack.config.prod.js：

module.exports = {
  mode: 'production',
  output: {
    path: path.resolve(__dirname, '../build'), // 生产产物输出到默认build目录
    filename: 'static/js/[name].[contenthash:8].js' // 加哈希实现静态资源缓存
  },
  devtool: 'source-map',
  // 可添加生产专属的压缩、资源优化配置
}

3. 同步更新package.json的脚本：

"scripts": {
  "build:dev": "webpack --config config/webpack.config.dev.js",
  "build:prod": "webpack --config config/webpack.config.prod.js"
}

四、运行构建命令 #

• 开发环境构建：执行 npm run build:dev
• 生产环境构建：执行 npm run build:prod

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