Default_Webpack_React_Program

运行

init：yarn

dev mode：yarn run dev:dev

build mode：yarn run build:dev

analy：yarn run build:analy

项目简介

1. WebPack5
2. React
3. Redux-ToolKit
4. React-Router-Dom
5. Ts
6. Axios
7. Sass [ 推荐 ]
8. Less [ 不推荐 ]
9. useWorker
10. ArcoDesign 已经删除 it has delete

优化配置

1. 多线程Build
2. CSS打包抽离
3. CSS JS压缩
4. 图片压缩
5. CSS模块化
6. 组件按需引入
7. Proxy代理
8. Webpack配置分离
9. Axios请求&响应拦截
10. 文件更改检测打印

文件介绍

1. Build

   介绍：Webpack配置

   introduce：webpack config

2. proxy

   介绍：prosy本地代理

   introduce：crossDomain access config

3. public

   介绍：初始HTML文件以及icon图片

   introduce：i think you know it

4. src

   1. api

      介绍：Axios请求存放目录

      introduce：http request

   2. assets

      介绍：音视频图片资源存放目录

      introduce: mp3,mp4,avi,png,jpeg...

   3. Axios

      介绍：Axios配置

      introduce: axios config

   4. components：通用组件目录

      介绍：LazyWrapper.tsx - 组件懒加载

      introduce: currency component

   5. layout

      介绍：可删除layout - 暂时配置不足

      introduce: if you don't use this component can delete it but don't forget delete use it's code

   6. pages

      介绍：页面目录

      introduce: pages

   7. routers

      介绍：路由目录

      introduce: router config

   8. store

      介绍：redux全局状态管理

      introduce: redux global state manager

   9. utils

      介绍：自制轮子

      introduce: some utils of yourself

   10. .browserslistrc

       介绍：浏览器兼容

       introduce: browsers compatibility

   11. App.module.sass

   12. App.tsx

   13. global.d.ts

       介绍：全局类型定义

       introduce: i think you know this

   14. Index.sass

   15. index.tsx

5. .gitignore

   介绍：git禁传配置

   introduce: i think you know this

6. babel.config.js

   介绍：babel兼容配置

   introduce: babel config

7. postcss.config.js

   介绍：postcss配置

   introduce: postcss config

8. tsconfig.json

   介绍：ts配置

   introduce: ts config

如果你有什么好的建议欢迎提交Issuse

if you has better idea welcome for submit issuse