文章序

脚手架虽好，但是为了彻底弄明白前端工程化和webpack，最好是手动创建前端项目亲身体验一把，本文旨在使用webpack从零开始构建react + ts项目，希望对你有所帮助

1.项目初始化

1.1创建文件夹

右键-新建-文件夹 重命名为react-ts-project
创建好后双击进入该文件夹

或者 命令行执行
mkdir react-ts-project
cd react-ts-project

1.2项目初始化

执行npm init -y初始化
执行完毕你会看到生成了一个package.json文件，此文件存放本项目相关信息，脚本命令，依赖包等信息
打开package.json，在script里增加
"dev": "webpack-dev-server --open --mode development",
"build": "webpack --mode production",
此时package.json文件内容

{
  "name": "react-ts-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2.依赖安装

用vscode或其他编译器打开react-ts-project，新建终端，在命令行中输入
npm i webpack webpack-cli webpack-dev-server react react-dom typescript esbuild-loader html-loader html-webpack-plugin
安装本项目所需依赖，执行完你会发现在项目根目录多了一个node_modules文件夹，该文件夹就是用于存放项目依赖，下面对这些依赖做简要解释
webpack、webpack-cli: 提供webpack打包基础能力，不多解释
webpack-dev-server: 提供开发环境本地运行项目的能力，可以使用node等替代
react、react-dom: react相关依赖包，不多解释
typescript: 提供Typescript语言能力
esbuild-loader: 打包时将js、jsx、ts、tsx等文件编译成目标版本语言，比如es5，用以替代bable + ts-loader
html-loader、html-webpack-plugin: 用以根据指定html模板文件生成最后打包的html文件
最终package.json文件内容

{
  "name": "react-ts-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "esbuild-loader": "^3.0.1",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.1",
    "react": "^18.3.0-canary-a1f97589f-20230526",
    "react-dom": "^18.3.0-canary-a1f97589f-20230526",
    "typescript": "^5.2.0-dev.20230602",
    "webpack": "^5.85.0",
    "webpack-cli": "^5.1.3",
    "webpack-dev-server": "^4.15.0"
  }
}

3.编写webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require("path");


module.exports = {
    entry: "./src/main.tsx", //入口文件
    output: {  //输出路径和文件名
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            {
                test: /\.html$/, //使用html-loader
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            },
            {
                test: /\.(js|ts|jsx|tsx)$/, //使用esbuild-loader将js、ts、jsx、tsx文件内容转换为es2015
                include: path.appSrc,
                use: [
                    {
                        loader: "esbuild-loader",
                        options: {
                            loader: "tsx",
                            target: "es2015",
                        },
                    }
                ]
            }
        ]
    },
    plugins: [ //使用插件，这里使用了HtmlWebPackPlugin
        new HtmlWebPackPlugin({
            title: "react-ts-project",
            filename: "./index.html",
            template: "./public/index.html"
        })
    ]
};

4.编写tsconfig.json

该文件是对ts语言的一些配置，直接复制即可，有兴趣可自行研究

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    // "suppressImplicitAnyIndexErrors": true,
    "outDir": "./build",
    "sourceMap": false,
    "allowJs": true, // allowJs=true => tsc compile js as module, no type check
    "removeComments": true,
    "noImplicitReturns": true,
    "noEmit": true,
    "noImplicitAny": false,
    "noImplicitThis": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "declaration": true,
    "downlevelIteration": true,
    "allowImportingTsExtensions": true,
    "lib": [
      "dom",
      "esnext",
      "DOM.Iterable"
    ],
    "baseUrl": "./",
    "paths": {
      "@api/*": [
        "./src/api"
      ],
      "@src/*": [
        "./src/*"
      ],
      "@components/*": [
        "./src/components/*"
      ],
      "@utils/*": [
        "./src/utils/*"
      ],
      "@styles": [
        "./src/styles"
      ]
    }
  },
  "include": [
    "src",
  ],
  "exclude": [
    "node_modules",
    "webpack",
    "build",
  ]
}

5.编写项目

首先在根目录下新建src文件夹、public文件夹，在public文件夹内新建index.html文件，文件内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react-ts-project</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

在src文件下新建main.tsx文件，文件内容如下

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.tsx";


ReactDOM.render(
  <App />,
  document.getElementById("app")
);

新建app.tsx文件，文件内容如下

import React, { useState } from "react";

function App() {

  return (
    <div>hello react + ts</div>
  );
}

export default App;

6.运行项目

此时你已经完成一个基本的react + ts项目了，在终端输入npm run dev运行项目，会自动打开浏览器你会看到

7.打包项目

当我们完成项目的编写，就需要将项目放到服务器上去运行了，在此之前需要对项目进行打包，在终端执行npm run build命令，会看到当打包完成在跟目录会出现一个dist文件夹，将该文件夹下的index.html和bundle.js文件放到服务器环境上对应的nginx或tomcat配置的路径内即可访问