我们没有那么多精力去看每个工具实现，能学会用就很好了
基础安装
1.生成package.json
npm init -y
2.安装webpack和cross-env
- webpack：打包
- webpack-cli: webpack的cli命令
- webpack-dev-server: 启动一个本地ip，指向本地打包结果
- cross-env: 设置环境变量
npm install webpack webpack-cli webpack-dev-server -D
npm install cross-env -D
- 安装babel
- babel-loader: webpack的loader，用于编译js或者tsx，将js打包为浏览器可以执行代码
- @babel/core: 将esmascript高级用法转换es5
- @babel-preset-env：后面补充
- @babel/preset-react： 将jsx转化为createElement
- @babel/preset-typescript： 打包的时候将typescript代码转为js代码
- @babel/plugin-transform-runtime：让@babel/core在打包后仅保留一份
- fork-ts-checker-webpack-plugin：用于运行时的typescript语法校验，有错误会直接提示
npm install babel-loader @babel/core @babel-preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime fork-ts-checker-webpack-plugin -D
4.html-webpack-plugin
npm install html-webpack-plugin -D
非js文件处理
1.wepback仅仅能够处理js，css，图片，音视频等其他文件，则需要配置rules
打包优化
- css-minimizer-webpack-plugin：压缩js的行类样式
- mini-css-extract-plugin：css打包到单独文件,进行压缩
- terser-webpack-plugin：压缩js，和去掉console防止内存泄漏
npm installcss-minimizer-webpack-plugin mini-css-extract-plugin terser-webpack-plugin -D
代码规范
1.eslint使用：运行时格式报错提示
- eslint
- eslint-plugin-prettier
- eslint-plugin-react
- eslint-plugin-react-hook
2.stylelint检验css格式
- stylelint
- stylelint-config-standard
3.prettier：保存自动格式化代码
- prettier
- eslint-plugin-prettier
4.lint-staged：git提交代码的时候，执行eslint校验和stylelint校验
- husky
- husky-ci
- lint-staged
单元测试
- jest
- babel-jest
优化
- webpack-bundle-analyzer 查看打包文件的组成
