使用Webpack打包React项目的流程步骤

mkdir my-react-app
cd my-react-app
npm init -y

# 安装React和React DOM
npm install react react-dom

# 安装Webpack及相关工具
npm install --save-dev webpack webpack-cli webpack-dev-server

# 安装Babel及其插件，将JSX和ES6代码转换为浏览器可识别的ES5代码
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

# 如果需要处理CSS、图片等静态资源，也可安装相关loader
npm install --save-dev css-loader style-loader file-loader

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 自动生成HTML文件

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.[contenthash].js', // 输出文件名（支持缓存）
    path: path.resolve(__dirname, 'dist'), // 输出路径
    clean: true, // 每次构建时清除旧文件
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/, // 处理JS和JSX文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',  // 转换ES6+语法
              '@babel/preset-react' // 转换JSX语法
            ]
          }
        }
      },
      {
        test: /\.css$/, // 处理CSS文件
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i, // 处理图片文件
        type: 'asset/resource'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'], // 自动解析文件扩展名
  },
  devServer: {
    static: './dist', // 开发服务器内容目录
    hot: true,      // 开启模块热替换（HMR）
    port: 3000,     // 指定开发服务器端口
    open: true,     // 自动打开浏览器
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // 使用自定义HTML模板
      favicon: './public/favicon.ico'
    })
  ],
  mode: 'development', // 开发模式下有更好的调试体验；生产模式下使用'mode: "production"'以开启优化
};

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

my-react-app/
├── dist/                   // 打包输出目录（构建时自动生成）
├── node_modules/
├── public/
│   ├── index.html          // HTML模板
│   └── favicon.ico
├── src/
│   ├── components/         // React组件
│   │   └── App.jsx
│   ├── index.js            // 应用入口文件
│   └── index.css           // 全局样式（可选）
├── .babelrc
├── package.json
└── webpack.config.js