从0到1使用Webpack5 + React + TS构建标准化应用
前言
本篇文章主要讲解如何从一个空目录开始，建立起一个基于webpack + react + typescript的标准化前端应用。
- 技术栈: webpack5 + React18 + TS
- 工程化: eslint + prettier + husky + git hooks
- 支持图片、less、sass、fonts、数据资源(JSON、csv、tsv等)、Antd按需加载以及主题
- 支持热更新、资源压缩、代码分离（动态导入、懒加载等）、缓存、devServer
背景
在项目开发中，我们可以使用create-react-app或者飞冰等脚手架工具，那么，为什么我们要自己来搭建一个标准化项目？
原因
- 当我们使用优秀的脚手架工具开发项目时，当然会提升很多便利，他们的功能更全面、性能更强大，但是在这些值得学习的榜样面前，我们需要从零开始，动手去实现每一个细节和功能，看的再多都不如自己动手实现一个demo更有效果。并且动手实践也可以帮助我们理解项目打包和编译的原理，进而提升自己的技术熟练度，扩展我们的知识面。Webpack 实现工程化方方面面的功能，自然不是 all in one code实现的。从 Webpack 的设计理念和实现原理中，我们能接触到工程化方面的知识：架构扩展、插件化、缓存机制。学习Webpack也代表着学习前端的发展趋势：例如在webpack的竟对Vite上，我们可以学到bundleless的理念，跳过了传统的打包这个概念，并且其他先进理念都是我们需要去学习的地方。
- 开发中，我们发现使用def、aone等生成一个成熟的前端项目模版，不难会发现，项目中的babel、weback、prettier、loader等配置文件缺失，而且难以修改现成的脚手架配置，可扩展能力较弱。导致在性能优化方面能做的工作有限，使得开发受到限制。
项目结构
目录
├── dist // 默认的 build 输出目录
├── .husky // pre-commit hook
├── webpack.config.js // 全局配置文件及webpack配置文件
├── test // 测试目录
└── src // 源码目录
├── assets // 公共的文件（如image、css、font等）
├── components // 项目组件
├── constants // 常量/接口地址等
├── routes // 路由
├── utils // 工具库
├── pages // 页面模块
├── Home // Home模块，建议组件统一大写开头
├── ...
├── App.tsx // react顶层文件
├── typing // ts类型文件
├── .editorconfig // IDE格式规范
├── .eslintignore // eslint忽略
├── .eslintrc // eslint配置文件
├── .gitignore // git忽略
├── .prettierrc // prettierc配置文件
├── .babelrc // babel配置文件
├── LICENSE.md // LICENSE
├── package.json // package
├── README.md // README
├── tsconfig.json // typescript配置文件
依赖
"dependencies": {
"antd": "^4.22.4", // 懂得都懂
"react": "^18.2.0", // 懂得都懂
"react-dom": "^18.2.0" // 懂得都懂
},
"devDependencies": {
// babel全家桶
"@babel/core": "^7.18.10",
"@babel/plugin-proposal-class-properties": "^7.18.6", // React class支持
"@babel/plugin-transform-runtime": "^7.18.10", // 抽离提取 Babel的注入代码，防止重复加载，减小体积
"@babel/preset-env": "^7.18.10", // 提供的预设，允许我们使用最新的JavaScript
"@babel/preset-react": "^7.18.6", // react支持
// ts类型检查
"@types/node": "^18.6.4",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
// @types 开头的是对应包的 TypeScript 类型声明
"@typescript-eslint/eslint-plugin": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0",
// webpack loader：解析对应文件
"csv-loader": "^3.0.5",
"sass-loader": "^13.0.2",
"xml-loader": "^1.2.1",
"ts-loader": "^9.3.1",
"less-loader": "^11.0.0",
// eslint全家桶
"eslint": "^8.21.0",
"eslint-config-ali": "^14.0.1", // ali前端规约
"eslint-config-prettier": "^8.5.0", // 关闭所有不必要或可能与[Prettier]冲突的规则
"eslint-import-resolver-typescript": "^3.4.0", // 添加 ts 语法支持 eslint-plugin-import
"eslint-plugin-import": "^2.26.0", // ES6+ import/export 语法支持
"eslint-plugin-prettier": "^4.2.1", // prettier语法支持
"eslint-plugin-react": "^7.30.1", // react语法支持
"eslint-plugin-react-hooks": "^4.6.0", // hooks语法支持
"eslint-webpack-plugin": "^3.2.0",
// webpack plugin
"fork-ts-checker-webpack-plugin": "^7.2.13", // 避免webpack中检测ts类型
"html-webpack-plugin": "^5.5.0", // 简化HTML文件的创建 ，配合webpack包含hash的bundle使用
"mini-css-extract-plugin": "^2.6.1", // css拆分
"optimize-css-assets-webpack-plugin": "^6.0.1", // css压缩
"terser-webpack-plugin": "^5.3.3", // 使用 terser 压缩 js （terser 是一个管理和压缩 ES6+ 的工具）
"webpack-bundle-analyzer": "^4.5.0", // webpack打包体积可视化分析
"webpack-cli": "^4.10.0", // 提供脚手架命令
"webpack": "^5.74.0", // webpack引擎
"webpack-dev-server": "^4.9.3", // 开发环境的live server
// 工具
"husky": "^8.0.1", // 自动配置 Git hooks 钩子
"less": "^4.1.3", // css类型
"sass": "^1.54.3", // css类型
"typescript": "^4.7.4", // ts
"lint-staged": "^13.0.3", // 对暂存的git文件运行linter
// prettier 格式化
"prettier": "^2.7.1",
"pretty-quick": "^3.1.3", // 在更改的文件上运行 prettier
}
实现过程
项目初始化
首先从一个空目录开始，对项目初始化：
mkdir demo
cd demo
git init
npm init
React和Babel引入
对于一个React项目，我们首先要安装React，写一个Hello World！
安装我们主要的项目依赖：
tnpm i -S react react-dom
由于我们的浏览器不支持最新的ECMAScript语法，所以我们需要Babel来转义为ES5或者ES6。
安装我们的Babel来提高兼容性:
tnpm i -D @babel/core babel-preset-env babel-preset-react @babel/plugin-proposal-class-properties
- @babel/core: babel转码的核心引擎
- babel-preset-env: 添加对ES5、ES6的支持
- babel-preset-react: 添加对JSX的支持
- @babel/plugin-proposal-class-properties: 对React中class的支持
Webpack引入
tnpm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
- webpack: weback插件的核心依赖
- webpack-cli: 为插件提供命令行工具
- webpack-dev-server: 帮助启动live server
- html-webpack-plugin: 帮助创建HTML模版
Babel配置
.babelrc中添加基本配置:
{
"presets": ["@babel/react", "@babel/env"],
"plugins": ["@