从0搭建一个react 项目工程

步骤 1：初始化项目

1. 创建项目目录并初始化 package.json 文件：

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

步骤 2：安装必要的依赖

1. 安装 React 和 React DOM：

yarn add react react-dom --save

2.安装 Webpack 及其相关插件：

yarn add webpack webpack-cli webpack-dev-server -D
yarn add babel-loader @babel/core @babel/preset-env @babel/preset-react -D
yarn add html-webpack-plugin -D
yarn add webpack-merge html-webpack-plugin copy-webpack-plugin -D

步骤 3：配置 Babel

1. 创建 .babelrc 文件并添加以下内容：

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

步骤 4：配置 Webpack

1. 在项目根目录下创建 webpack文件夹根据不同环境,条件设置设置不同的配置,也可以设置单一的webpack.config.js;我这里按文件夹的形式去简单设置了一个结构,可根据项目的实际需求去进行配置:

1.1 common.js 共用部分

const path = require("path");
const relativePath = (p) => path.join(process.cwd(), p);
const TerserPlugin = require("terser-webpack-plugin");
const src = relativePath("src");
module.exports = {
  resolve: {
    extensions: [
      ".js",
      ".jsx",
      ".json",
      ".wasm",
      ".css",
      ".scss",
      ".tsx",
      ".ts",
    ],
    alias: {
      "@": path.resolve(__dirname, "../src"),
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|tsx|ts)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: {
                // localIdentName: "[name]__[local]___[hash:base64:5]",
                localIdentName: "[local]",
              },
              importLoaders: 1,
            },
          },
          "sass-loader",
        ],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false, // 移除 LICENSE.txt 文件
      }),
    ],
    // splitChunks: {
    //   chunks: 'all',
    // },
  },
  plugins: [],
};

dev.js 开发模式下的配置

const { merge } = require("webpack-merge");
const common = require("./common.js");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const CopyPlugin = require("copy-webpack-plugin");
const path = require("path");

module.exports = merge(common, {
  mode: "development",
  entry: "./src/index.tsx", //src/index.tsx
  devtool: "cheap-module-source-map",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "index.js",
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
      inject: "body",
      cdnConfig: [
        {
          name: "react",
          scope: "REACT",
          js: "index.js",
          css: "//at.alicdn.com/t/c/font_3925109_fqq1lcbcgp.css",
        },
      ],
    }),

    // new CopyPlugin({
    //   patterns: [{ from: "public", to: "." }],
    // }),
  ],
  devServer: {
    static: [
      {
        directory: path.join(__dirname, "../dist"),
      },
    ],
    compress: true,
    port: 8088,
    host: "0.0.0.0", // 允许从任意IP访问
    hot: true,
    open: true,
    liveReload: true,
    watchFiles: ["src/**/*", "public/**/*"],
  },
});

prod.js build 的配置

const { merge } = require("webpack-merge");
const common = require("./common.js");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //清理dist目录
const CopyPlugin = require("copy-webpack-plugin");
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = merge(common, {
  mode: "production",
  entry: "./src/index.tsx",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "bundle.[contenthash].js", // Use content hash for better caching
  },
  devtool: "source-map", // Source maps for production
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()], // Minify JavaScript
  },
  plugins: [
    new CleanWebpackPlugin(), //清理dist目录
    new HtmlWebpackPlugin({
      template: "./public/index.html", // Use your custom template
      filename: "index.html",
      inject: "body",
    }),
  ],
});

package.json 添加指令

{
  "name": "readingWeb",
  "version": "1.0.0",
  "author": "zl",
  "license": "MIT",
  "scripts": {
    "dev": "webpack serve --watch --mode development --config webpack/dev.js --progress",
    "build": "webpack --mode production --config webpack/prod.js"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.24.5",
    "@babel/preset-env": "^7.24.5",
    "@babel/preset-react": "^7.24.1",
    "@babel/preset-typescript": "^7.24.1",
    "babel-loader": "^9.1.3",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^12.0.2",
    "html-webpack-plugin": "^5.6.0",
    "terser-webpack-plugin": "^5.3.10",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4",
    "webpack-merge": "^5.10.0"
  }
}

步骤 5：整个项目的目录结构

project/
│
├── public/
│   ├── template.html
│   ├── other-assets...
│
├── src/
│   ├── index.tsx
│   ├── App.tsx
│   ├── ...
│
├── webpack/
│   ├── common.js
│   ├── dev.js
│   ├── prod.js
│
├── dist/  (this will be cleaned on each build)
│
├── package.json
├── ...