如何用React/Craco生成可部署到开发服务器的开发构建包

数据老陈

2026-8-16

生成Craco React应用的开发模式构建包

方案步骤：

添加自定义开发构建脚本
在package.json的scripts中新增开发构建命令，强制指定环境为开发模式：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "build:dev": "NODE_ENV=development craco build"
}

如果是Windows系统，需先安装cross-env统一环境变量设置：

npm install cross-env --save-dev
# 或
yarn add cross-env --dev

然后修改脚本为：

"build:dev": "cross-env NODE_ENV=development craco build"

配置Craco禁用生产优化
在项目根目录的craco.config.js中添加webpack配置，确保开发模式下不压缩代码、保留开发特性：

module.exports = {
  webpack: {
    configure: (webpackConfig, { env }) => {
      if (env === 'development') {
        // 锁定webpack为开发模式
        webpackConfig.mode = 'development';
        // 关闭代码压缩
        webpackConfig.optimization.minimize = false;
        // 移除生产环境压缩插件
        webpackConfig.optimization.minimizer = [];
        // 设置开发友好的Source Map，方便调试
        webpackConfig.devtool = 'cheap-module-source-map';
        // 强制React使用开发版本，确保DevTools识别
        webpackConfig.resolve.alias = {
          ...webpackConfig.resolve.alias,
          'react-dom$': 'react-dom/unstable-react-dom.development.js',
          'react$': 'react/react.development.js'
        };
      }
      return webpackConfig;
    }
  }
};