当前位置：首页 > React

react框架如何打包

2026-02-26 16:57:31React

使用 Create React App 打包

Create React App (CRA) 是 React 官方推荐的脚手架工具，内置了打包配置。运行以下命令生成生产环境打包文件：

npm run build

打包后的文件默认输出到 build 目录，包含静态 HTML、CSS 和 JavaScript 文件，可直接部署到服务器。

自定义 Webpack 配置

如需深度定制打包流程，可 eject CRA 或手动配置 Webpack：

Eject CRA（不可逆操作）：
```
npm run eject
```
完成后可修改 config/webpack.config.js 调整优化策略（如代码分割、压缩选项）。

手动配置 Webpack：
安装必要依赖：

npm install webpack webpack-cli babel-loader css-loader html-webpack-plugin --save-dev

示例配置片段（webpack.config.js）：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js',
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  }
};

优化打包输出

代码分割：
使用动态 import() 或 Webpack 的 SplitChunksPlugin 拆分代码：
```
// webpack.config.js
optimization: {
  splitChunks: { chunks: 'all' }
}
```
压缩资源：
添加 TerserPlugin 压缩 JavaScript，CssMinimizerPlugin 压缩 CSS：
```
npm install terser-webpack-plugin css-minimizer-webpack-plugin --save-dev
```
环境变量：
通过 .env 文件注入变量，打包时使用 process.env 访问：
```
REACT_APP_API_URL=https://api.example.com
```

部署打包文件

静态服务器：
使用 serve 快速测试生产包：
```
npx serve -s build
```
CDN/云服务：
上传 build 目录内容至 AWS S3、Netlify 或 Vercel 等平台，配置自动部署。
Docker 容器化：
创建 Dockerfile 基于 Nginx 镜像部署：
```
FROM nginx:alpine
COPY build /usr/share/nginx/html
EXPOSE 80
```