react程序如何打包
打包 React 程序的方法
React 程序的打包通常使用工具如 webpack 或 vite，以下是常见方法：
使用 Create React App (CRA) 内置打包
如果项目是通过 create-react-app 创建的，直接运行以下命令即可打包：
npm run build打包后的文件会生成在 build 目录中，包含优化后的静态资源。
手动配置 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|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};运行打包命令：
webpack --mode production使用 Vite 打包
若项目基于 Vite，在 vite.config.js 中配置后，运行：
npm run build打包结果默认输出到 dist 目录，支持现代浏览器的高效构建。
优化打包结果
通过分析工具（如 webpack-bundle-analyzer）检查体积：
npm install --save-dev webpack-bundle-analyzer在 webpack.config.js 中添加插件：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [new BundleAnalyzerPlugin()],
};静态资源部署
打包后可将 build 或 dist 目录内容部署到静态服务器（如 Nginx、Netlify）。例如 Nginx 配置：
server {
listen 80;
root /path/to/build;
index index.html;
location / {
try_files $uri /index.html;
}
}环境变量配置
在 .env 文件中定义变量（如 REACT_APP_API_URL），打包时会注入：
REACT_APP_API_URL=https://api.example.com通过 process.env.REACT_APP_API_URL 在代码中访问。
