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

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

# 安裝Webpack及相關(guān)工具
npm install --save-dev webpack webpack-cli webpack-dev-server

# 安裝Babel及其插件，將JSX和ES6代碼轉(zhuǎn)換為瀏覽器可識別的ES5代碼
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

# 如果需要處理CSS、圖片等靜態(tài)資源，也可安裝相關(guān)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, // 每次構(gòu)建時清除舊文件
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/, // 處理JS和JSX文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',  // 轉(zhuǎn)換ES6+語法
              '@babel/preset-react' // 轉(zhuǎn)換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', // 開發(fā)服務器內(nèi)容目錄
    hot: true,      // 開啟模塊熱替換（HMR）
    port: 3000,     // 指定開發(fā)服務器端口
    open: true,     // 自動打開瀏覽器
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // 使用自定義HTML模板
      favicon: './public/favicon.ico'
    })
  ],
  mode: 'development', // 開發(fā)模式下有更好的調(diào)試體驗；生產(chǎn)模式下使用'mode: "production"'以開啟優(yōu)化
};

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

my-react-app/
├── dist/                   // 打包輸出目錄（構(gòu)建時自動生成）
├── node_modules/
├── public/
│   ├── index.html          // HTML模板
│   └── favicon.ico
├── src/
│   ├── components/         // React組件
│   │   └── App.jsx
│   ├── index.js            // 應用入口文件
│   └── index.css           // 全局樣式（可選）
├── .babelrc
├── package.json
└── webpack.config.js