cra5-craco6-react18-router6-antd4-mobx6: cra5-craco6-react18-router6-antd4-mobx6 吧cra创建的项目进行优化不破坏webpack配置 create-react-app@5.0.1 @craco/craco@6

cra5-craco6-react18-router6-antd4-mobx6

吧cra创建的项目进行优化  不破坏webpack配置  
2022.7.15  
create-react-app@5.0.1  
目前craco对cra5版本支持还不是很好

# 创建项目
npx create-react-app my-app  
# @craco/craco@6
https://github.com/dilanx/craco  
cnpm i -D @craco/craco  
新建 craco.config.js  
参考 https://juejin.cn/post/6871148364919111688

# 修改绝对路径别名@指向src
配置文件加上 alias

# react-router-dom@6
cnpm i -S react-router-dom  
v5与v6区别 参考网站 https://blog.csdn.net/weixin_57935165/article/details/122844132  
api参考 https://reactrouter.com/docs/en/v6

# antd@4
cnpm i -S antd @ant-design/icons  
cnpm i -D babel-plugin-import // antd按需加载   
配置文件 加上 babel  
  
# scss
cnpm i node-sass -D  
模块化scss不需要特别的配置  
常用写法参考 https://www.jianshu.com/p/a99764ff3c41

# sass-resources-loader
cnpm i -D craco-sass-resources-loader   
修改配置文件  
 
 # 浏览器自动增加前缀
 cnpm i postcss autoprefixer -D  
 修改配置 postcss

# mobx
cnpm i mobx mobx-react -S  
参考网站 https://blog.csdn.net/u010059669/article/details/122476596

# 路由异步加载

# 打包清理文件
无需配置

# css打包到单独文件
无需配置

# css js压缩
无需配置

# less 取消modules

沐辰/cra5-craco6-react18-router6-antd4-mobx6

简介

发行版

贡献者

近期动态

沐辰/cra5-craco6-react18-router6-antd4-mobx6 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

沐辰/cra5-craco6-react18-router6-antd4-mobx6