React+Typescript+antd+Webpack5的最简单配置

1. 首先新建一个文件夹（叫什么都行，最好是英文名）,

mkdir my-okr

2. 进入文件夹，并初始化package.json

cd my-okr
npm init -y

4. 安装React

npm i react react-dom react-router-dom -S

5. 安装typescript和ts声明文件

npm i typescript @types/react @types/react-dom @types/react-router-dom -D
根目录新建tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true
    }
}

6. 安装webpack, webpack-cli，webpack-dev-server, html-webpack-plugin和clean-webpack-plugin

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin -D

7. 安装babel，用来解析jsx和tsx

npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript babel-plugin-import -S

8. 配置babel

根目录下新建文件 .babelrc
touch .babelrc
并添加以下内容

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

9. 安装babel-loader, ts-loader, style-loader, css-loader, less-loader, less

npm i babel-loader ts-loader style-loader css-loader less-loader less -D
因为后续安装的antd中的样式文件有用less编写的，所以也需要less和less-loader

10. 新建并配置webpack.config.js

touch webpack.config.js
写入以下内容：

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// 获取命令行参数并过滤，只保留含development或production的
const mode = process.argv.slice().find(arg=>/(development|production)$/.test(arg))

module.exports = {
    mode: mode.split("=")[1],// 'development'或'production'，不指定的话控制台会有warning信息
    entry: path.join(__dirname, 'src', 'index.tsx'),// 入口文件
    output: {
        path: path.join(__dirname, 'build'),// 打包的输出目录
        filename: 'bundle.js'// 打包的输出文件名
    },
    plugins: [
        // 生成html文件
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'index.html'),// 基于模板创建html文件
            filename: 'index.html'// 生成html文件的名字
        }),
        // 清理上次打包的文件
        new CleanWebpackPlugin({
            path: path.join(__dirname, 'build')
        })
    ],
    // 在import .ts/.tsx/.js/.jsx文件时，不用包含拓展名了
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        // 根据不同的拓展名，使用不同的loader来解析文件，因为默认只认识.js, .json文件
        rules: [
            { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader' } },
            { test: /\.(ts|tsx)$/, exclude: /node_modules/, use: {loader: 'ts-loader'} },
            // 注意顺序，先style-loader，再css-loader和其他loader
            { test: /\.(css|less)$/, exclude: /node_modules/, use: ['style-loader', 'css-loader', 'less-loader']}
        ]
    },
    // 缓存来提高二次构建速度
    cache: {
        type: "filesystem",
        buildDependencies: {
            config: [__filename],
        },
        name: "development-cache"
    },
    devServer: {
        port: 3001,
        static: path.join(__dirname, 'build'),// 临时的打包目录（在内存中）
        open: true
    }
}

11. 查看webpack是否已配置好

根目录新建index.html, 新建文件夹src，src中新建index.tsx, App.tsx, App.css
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>MY-OKR</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

index.tsx内容：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

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

App.tsx内容

import React, {FC} from 'react'
import './App.css'

const App: FC = ()=>{
    return <div className="App">
        1234
    </div>
}

export default App