react.js如何打包发布

安装依赖

确保项目已安装必要的依赖包，包括 react、react-dom 和构建工具（如 webpack 或 vite）。若使用 webpack，需安装 webpack、webpack-cli 及相关插件（如 babel-loader、css-loader）。

配置构建工具

根据选择的构建工具进行配置：

• Webpack：创建 webpack.config.js 文件，配置入口文件、输出路径、加载器和插件。例如：

  const path = require('path');
  module.exports = {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: 'babel-loader',
        },
      ],
    },
  };

• Vite：无需额外配置，默认支持 React，直接运行 vite build 即可。

优化生产构建

通过环境变量和工具配置优化生产环境代码：

• 设置 NODE_ENV=production 以启用 React 的优化模式。
• 使用 TerserPlugin（Webpack）或 vite 内置的压缩功能减少代码体积。
• 通过代码分割（如 React.lazy 和 Suspense）拆分代码块。

生成静态文件

运行构建命令生成打包文件：

• Webpack：执行 npx webpack --mode production，输出文件默认在 dist 目录。
• Vite：执行 npm run build，输出文件默认在 dist 目录。

部署到服务器

将生成的静态文件（如 index.html、bundle.js 和资源文件）上传至服务器：

• 使用 FTP 或 CI/CD 工具（如 GitHub Actions）自动部署。
• 若使用静态托管服务（如 Vercel、Netlify），直接拖拽 dist 文件夹或关联 Git 仓库。

验证部署

访问部署后的 URL，检查页面功能是否正常。使用浏览器开发者工具查看网络请求和错误日志，确保资源加载无误。

可选：配置路由

若项目使用 react-router，需确保服务器支持 History API 回退。例如，在 Nginx 中添加配置：

location / {
  try_files $uri /index.html;
}