0到1创建React + Typescript 项目1. 创建 react + ts 项目 2. 使用到的cli 以及相

npm init

初始化一个新的 Node.js 项目，并创建一个 package.json 文件
npm install react react-dom

安装项目依赖的第三方库和工具。

-S / --save：将库或工具作为生产依赖安装，会被打包到生产环境中，供用户使用

-D / --save-dev：将库或工具作为开发依赖安装，只在开发环境中使用，不会被打包到生产环境中。通常用于安装测试框架，代码检查工具，打包工具等

默认情况下会将库或工具作为生产依赖安装（-S）;

生产环境是指应用程序或系统在正式运行和提供服务的环境，通常是指线上环境或生产服务器
npm install webpack webpack-cli --save-dev

安装 webpack 依赖
npm install react react-dom @types/react @types/react-dom --save

安装 react 类型依赖包含 react 和 react-dom 的类型，使用 TypeScript 和 React 的时候使用
npm i babel-loader @babel/core @babel/preset-react @babel/preset-typescript -D

@babel/preset-typescript：预设 ts 语法转成 js 语法 @babel/preset-react: 来识别 jsx 语法。
npm i html-webpack-plugin -D

自动生成 HTML 文件，并将打包后的资源自动引入到 HTML 文件中
npm i webpack-dev-server webpack-merge -D

webpack-merge：合并开发环境和生产环境以及通用配置
npm install serve -g

全局安装 serve，并执行 serve -s dist，启动打包后的项目

npm i cross-env -D

配置环境变量，在 package.json 文件中，设置如下指令

"start:dev": "cross-env NODE_ENV=development webpack-dev-server -c build/webpack.dev.js",

// DefinePlugin 允许在 编译时 将你代码中的变量替换为其他值或表达式
 new webpack.DefinePlugin({
   'process.env.BASE_ENV': JSON.stringify(process.env.BASE_ENV)
 })

npm i style-loader css-loader less-loader less -D

webpack 默认只认识 js ，less 解析为 css，css-loader 解析 css，之后挂在到 style 标签中
npm i postcss-loader autoprefixer -D

处理 css3 前缀兼容 postcss-loader：处理 css 时自动加前缀 autoprefixer：决定添加哪些浏览器前缀到 css 中
npm i babel-loader @babel/core @babel/preset-env core-js -D
npm i speed-measure-webpack-plugin -D speed-measure-webpack-plugin 是一个用于测量 Webpack 构建性能的插件。它可以帮助您分析和优化您的 Webpack 构建过程，以提高构建速度和性能。
npm i thread-loader -D
npm install webpack-bundle-analyzer -D

查看 webpack 打包压缩后的体积是一个 plugin 插件
npm i mini-css-extract-plugin -D
npm i css-minimizer-webpack-plugin -D
npm i terser-webpack-plugin -D
npm i compression-webpack-plugin -D
npm i eslint -D
npx eslint --init
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin -D