框架和工具：react、mirrors、react-app-rewired、customize-cra、antd

参考文档：gykj.yuque.com/gugcdf/ybmk…

juejin.cn/post/684490…

步骤：

1）npm install -g create-react-app

2）create-react-app newapp

3. npm install yarn -g

4. Yarn add react-app-rewired

5. Yarn add customize-cra

6. Yarn add less less-loader -D

7. yarn add compression-webpack-plugin -D

8. 修改package.json文件：

"scripts": {

​ "start": "react-app-rewired start",

​ "build": "react-app-rewired build",

​ "test": "react-app-rewired test",

​ "eject": "react-app-rewired eject"

},

9. 根目录下添加config-overrides.js文件

10. 用customize-cra+react-app-rewired来配置webpack

11. 配置and. : npm i --save-dev babel-plugin-import

​ nom i --save antd

12. 添加react-hot-reloader : npm i react-hot-loader -D

​ npm i react-app-rewire-hot-loader @hot-loader/react-dom -D

13. lodash插件优化 :yarn add lodash-webpack-plugin --dev,

14. 新建.bable文件

react-app-rewired启动react项目报错,把依赖重新install一遍

路由配置：

15. 安装mirror，用于state状态、路由、redux管理:

npm i --save-dev mirrorx

16. 新建 model.js,container.js,service.js,router.js文件，

采用mirror的内置高阶函数配置：mirror.model(),

connect(),

mirror.default({historyModel:"hash"}),

render(,document.getElementById('root')),

Mirror.hook()

爬坑指南：a)Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.解决：npm install css-loader@5.0.0;

b)Cannot find module 'less',解决：npm i --save-dev less

c)react项目less样式px单位变成了,检查是否使用了addPostcssPlugins插件;

d)路由跳转但是页面要手动刷新，解决：Router 下面只能包含一个div，且不能是自定义组件，同时，Link和Route要在同一个Router下面；path跟的路径不能为“./url“，要去掉点