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
App.css内容：
.App{
text-align: center;
}
然后修改package.json文件的scripts字段，新增dev和build命令：
命令行执行npm run dev，浏览器自动打开http://localhost:3001/，并显示一个居中的1234
注意，如果@babel/core是7以上，babel-loader需要用8以上才行，否则会报错
12. 安装antd
npm i antd -S
13. 配置antd
重新执行npm run dev，可以看到居中的蓝色按钮
