【个人笔记】2023年搭建基于webpack5与typescript的react项目

写在前面

由于我在另外的一些文章所讨论或分析的内容可能基于一个已经初始化好的项目，为了避免每一个文章都重复的描述如何搭建项目，我在本文会统一记录下来，今后相关的文章直接引用文本，方便读者阅读。此文主要为个人笔记，不会有太多的关于思路的描述；另外，本文仅仅描述如何搭建基础react项目，不涉及图片等资源的加载，关于图片等资源的处理，我会单独编写一期。

项目初始化

创建一个目录，例如：webpack5-react-demo，然后进入目录执行初始化指令

添加gitignore文件，路径为项目根目录/.gitignore：

初始化git仓库：

（0）NPM依赖添加

（1）webpack.config.js

作用：webpack基本配置，定义入口、各种loader、plugin等。

路径：项目根目录/webpack.config.js

内容：

（2）.babelrc

作用：被@babel/core读取使用，其中定义了@babel/core要用到的preset、plugin等组件，对ts文件进行编译。想要深入理解，可以阅读另一篇文章：【长文详解】TypeScript与Babel、webpack的关系以及IDE对TS的类型检查 - 知乎 (zhihu.com)。

路径：项目根目录/.babelrc

内容：

（3）tsconfig.json

作用：仅作为IDE进行TypeScript类型检查服务的文件，与ts代码编译没有直接关系。可以阅读另一篇文章来了解：【长文详解】TypeScript与Babel、webpack的关系以及IDE对TS的类型检查 - 知乎 (zhihu.com)

路径：项目根目录/tsconfig.json

内容：

（4）项目代码

src目录下，三个文件：index.tsx、index.module.less、react-app.d.ts。

src/index.tsx

路径：项目根目录/src/index.tsx

内容：

src/index.module.less

路径：项目根目录/src/index.module.less

内容：

src/react-app.d.ts（特别）

作用：仅仅用于类型定义，目前定义的是模块化less文件的结构定义。

路径：项目根目录/src/react-app.d.ts

内容：

public/index.html

作用：指定的html模板，根webpack.config.js里面HtmlWebpackPlugin所制定的模板路径保持一致。

路径：项目根目录/public/index.html

内容：

运行

在package.json中添加运行脚本：

效果：

020-run

附录

图解webpack配置与NPM包关系

010-webpack-config-and-npm

github仓库

w4ngzhen/webpack5-react-demo (github.com)