1.项目创建
初始化package.json文件,在文件根目录打开终端输入
pnpm init
1
会在根目录生成一个 package.json 文件：
{
"name": "webpack5_react_typescript_cli", //文件名
"version": "1.0.0", //版本号
"description": "",
"main": "index.js",
"scripts": { //命令
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "", //作者
"license": "ISC", //开源
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2.基本项目结构
在根目录下创建项目的基本结构
index.html内容
<!DOCTYPE html>
1
2
3
4
5
6
7
8
9
10
11
12
3.引入react
安装依赖
pnpm i react react-dom
pnpm i @types/react @types/react-dom -D
1
2
index.tsx
import React from "react";
import { createRoot } from "react-dom/client";
import App from './App';
const root = document.querySelector('#root')
if(root){
createRoot(root).render()
}
1
2
3
4
5
6
7
8
9
App.css
h2{
color:red;
}
1
2
3
App.tsx
import React from "react";
import './App.css'
function App(){
return
Helle East_White
}
export default App
1
2
3
4
5
6
7
8
4.引入typescript
安装依赖
pnpm i typescript -D
pnpm i babel-loader ts-node @babel/core @babel/preset-react @babel/presettypescript @babel/preset-env core-js -D
1
2
初始化tsconfig.json
npx tsc --init
1
就会在根目录生成tsconfig.json文件
{
"compilerOptions": {
"jsx": "react-jsx",
"target": "es2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
1
2
3
4
5
6
7
8
9
10
11
5.配置webpack
安装依赖
pnpm i webpack webpack-cli -D
1
5.1webpack.base.ts
配置webpack.base.ts文件
import { Configuration } from 'webpack'
import path from 'path';
import HtmlWebpackPlugin from "html-webpack-plugin";
const baseConfig: Configuration = {
entry: path.join(dirname, '../src/index.tsx'),
output: {
filename: 'static/js/[name].js',
path: path.join(dirname, "../dist"),
clean: true,
publicPath: '/'
},
module: {
rules: [
{
test: /.(ts|tsx)$/,
use: {
"babel-loader"，
presets: [
[
"@babel/preset-env",
{
targets: { browsers: [">1%", "last 2 versions", "not ie <=8"] },
useBuiltIns: 'usage',
corejs: 3,
loose: true,
}
],
["@babel/preset-react", { runtime: "automatic" }],
"@babel/preset-typescript",
]
}
},
{
test: /.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".jsx", ".js"],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "../public/index.html"),
minify: {
collapseWhitespace: true, //去空格
removeComments: true, // 去注释
}
})
]
}
export default baseConfig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
另外因为我们在 App.tsx 中引入了 css 文件，所以还需要安装相关的 loader
pnpm i style-loader css-loader html-webpack-plugin -D
1
因为webpack.base.ts包含所有的基本配置，随着webpack 做的事情越来越多，会逐渐变得很
庞大，我们可以将其中的 babel-loader 相关的配置抽离出来进行管理。在根目录新建
babel.config.js ：
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: { browsers: [">1%", "last 2 versions", "not ie <=8"] },
useBuiltIns: 'usage',
corejs: 3,
loose: true,
}
],
["@babel/preset-react", { runtime: "automatic" }],
"@babel/preset-typescript",
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
再简化webpack.base.ts，将babel-loader配置简化为
module: {
rules: [
{
test: /.(ts|tsx)$/,
use: "babel-loader"
},
{
test: /.css$/,
use: ["style-loader", "css-loader"]
}
]
},
1
2
3
4
5
6
7
8
9
10
11
12
5.2webpack.dev.ts
接下来配置启动文件，通过webpack-dev-server启动项目，安装相关的依赖
pnpm i webpack-dev-server webpack-merge -D
1
配置webpack.dev.ts
import path from "path";
import { merge } from "webpack-merge";
import { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
import baseConfig from "./webpack.base";
interface Configuration extends WebpackConfiguration {
devServer?: WebpackDevServerConfiguration;
}
const host = "127.0.0.1";
const port = "8082";
// 合并公共配置,并添加开发环境配置
const devConfig: Configuration = merge(baseConfig, {
mode: "development", // 开发模式,打包更加快速,省了代码优化步骤
devtool: "eval-cheap-module-source-map",
devServer: {
host,
port,
open: true, // 是否自动打开
compress: false, // gzip压缩,开发环境不开启，提升热更新速度
hot: true, // 开启热更新
historyApiFallback: true, // 解决history路由404问题
setupExitSignals: true, // 允许在 SIGINT 和 SIGTERM 信号时关闭开发服务器和退出进程。
static: {
directory: path.join(__dirname, "../public"), // 托管静态资源public文件夹
},
headers: { "Access-Control-Allow-Origin": "*" }, // HTTP响应头设置，允许任何来源进行跨域请求
},
});
export default devConfig;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
在package.json中添加启动脚本
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack serve -c build/webpack.dev.ts"
},
1
2
3
4
在终端中输入命令 pnpm dev 运行，发现页面自动启动了
5.3webpack.prod.ts
配置webpack.prod.ts
import { Configuration } from "webpack";
import { merge } from "webpack-merge";
import baseConfig from "./webpack.base";
const prodConfig: Configuration = merge(baseConfig, {
mode: "production", // 生产模式,会开启tree-shaking和压缩代码,以及其他优化
});
export default prodConfig;
