介绍：基本常见的功能都封装实现了

⭐ 路由模块化批量导入
⭐ 路由高阶组件前置守卫
⭐ 路由基础404匹配以及显示组件
⭐ 路由跳转进度条
⭐ 路由懒加载
⭐ redux-toolkit异步同步调用action
⭐ redux持久化
⭐ 基于craco自定义配置webpack
⭐ webpack开发环境跨域
⭐ webpack配置alias
⭐ 环境变量的配置
⭐ css预处理器less
⭐ css模块化实现作用域
⭐ antd以及按需导入
⭐ axios基础封装
......

仓库地址：gitee.com/lopck/base-…

实现（主要思路，具体实现看代码）

1. 路由模块化批量导入: 参考我的另一篇关于批量导入的博客:前端批量导入的三种方式以及深入理解require.content中的mode参数 - 掘金 (juejin.cn)

2. 路由高阶组件前置守卫: 参考我的另一篇关于封装路由守卫的博客:在React中利用递归和迭代手撕一个useRoute和useMatched的功能 - 掘金 (juejin.cn)
   

3. 路由基础404匹配以及显示组件: 通过*匹配未知路由重定向到404组件，通过useNavigate实现历史回退，跳转主页等

 {
    path: '*',
    element: <Navigate to="/404" replace />,
  }

4. 路由懒加载: 采用React.lazy再自己封装一个suspense组件配合antd加载中组件作为懒加载过渡
   
5. redux-toolkit与持久化 参考我的另一篇关于Redux的博客：Vue3和react状态管理之Redux与Pinia的使用比较 - 掘金 (juejin.cn)
   
6. 路由跳转进度条:采用NProgress在路由守卫组件中开启与关闭
   
7. webpack开发环境配置跨域:

module.exports = {
//webpack和vite对server配置大同小异，webpack属性叫做devServer，vite叫做server
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '',
                },
            },
        },
    },

9. webpack配置alias，less与模块化,antd按需导入: 参考我的另一篇关通过craco自定义配置webpack的博客：React基于craco自定义配置alias,less以及模块化，antd按需导入，环境变量 - 掘金 (juejin.cn)
   ...