react框架如何打包

打包 React 项目的步骤

使用 create-react-app 创建的项目默认集成了 Webpack 配置，可通过以下命令生成生产环境打包文件：

npm run build

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

自定义 Webpack 配置

如需修改默认配置，可执行以下操作：

1. 弹出默认配置（不可逆操作）：

   npm run eject

2. 手动覆盖配置（推荐）： 创建 craco.config.js 文件并使用 @craco/craco 工具：

   module.exports = {
   webpack: {
    configure: (webpackConfig) => {
      // 修改配置
      return webpackConfig;
    }
   }
   }

优化打包输出

在 package.json 中添加环境变量：

"build": "GENERATE_SOURCEMAP=false react-scripts build"

常用优化手段：

• 使用 compression-webpack-plugin 开启 Gzip 压缩
• 通过 SplitChunksPlugin 拆分代码块
• 配置 TerserPlugin 进行代码压缩

静态资源处理

对于图片等资源，Webpack 会自动处理：

• 小于 8KB 的图片转为 Base64
• 较大文件会复制到 build 目录
• 可通过修改 webpack.config.js 调整阈值

部署注意事项

打包后需注意：

• 路由应用需配置服务器重定向规则
• 静态资源路径问题可通过设置 homepage 字段解决
• 推荐使用 serve 工具本地测试打包结果：

  npx serve -s build

多环境配置

通过 .env 文件管理环境变量：

REACT_APP_API_URL=https://api.example.com

变量需以 REACT_APP_ 开头才能在代码中访问。