react如何打包

React 项目打包方法

React 项目通常使用 create-react-app (CRA) 或类似脚手架工具创建，内置了 Webpack 配置。以下是打包步骤：

安装依赖 确保项目根目录已安装所有依赖，运行以下命令：

npm install

生成生产环境构建 使用 React 脚本提供的 build 命令：

npm run build

该命令会在项目根目录下生成 build 文件夹，包含优化后的静态文件。

自定义构建输出路径 在 package.json 中修改 build 脚本，指定输出目录：

"scripts": {
  "build": "react-scripts build && mv build ../custom-output"
}

分析打包体积 添加 --stats 参数生成分析文件：

npm run build -- --stats

使用工具如 webpack-bundle-analyzer 可视化分析。

环境变量配置 创建 .env.production 文件定义生产环境变量：

REACT_APP_API_URL=https://api.example.com

优化构建性能

• 启用多线程压缩：在 react-scripts 项目中默认已配置
• 代码分割：使用 React.lazy 和 Suspense 实现动态加载

部署构建结果 将 build 文件夹内容上传至静态文件托管服务（如 Netlify、Vercel）或 Web 服务器。

高级配置选项

自定义 Webpack 配置 通过 react-app-rewired 覆盖默认配置：

1. 安装工具：

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

2. 创建 config-overrides.js 文件：

   module.exports = function override(config) {
   // 修改配置
   return config;
   }

生成源映射 默认情况下会生成源映射文件，可通过 GENERATE_SOURCEMAP 环境变量控制：

GENERATE_SOURCEMAP=false

静态资源处理

• 图片文件：默认会被压缩并内联小于 8KB 的文件
• 字体文件：需放在 public 目录或通过 CSS @font-face 引用

多环境打包 使用不同 .env 文件区分环境：

cp .env.production .env
npm run build