day 1 react-router v6初使用

---

前言

前端小菜鸟的研究第一天记录：昨天刚刚将使用脚手架初始化的一个空项目扔上去了，想着总这么空着不好，于是决定开始慢慢填充内容，主要是填充一些自己平时的学习内容，有个地方记录并呈现效果。

1. 前期工作

（1）目录整理：目前的初始化的src文件目录比较杂乱，所以先按照开发习惯将src分了三个模块，分别是业务代码、静态资源和公共组件，目录层级看起来清爽了些。
（2）less- loader安装：因为看less比较习惯一点，所以将初始化时的css后缀全都改掉了，改完之后发现样式们都不生效了，研究了会发现是脚手架初始化出来的react项目默认不支持less，需要手动配置。
由于webpack配置上默认隐藏的，所以首先通过npm run eject命令将其暴露如下图。
然后通过npm i less less-loader安装less和less-loader。
最后就是配置到webpack.config.js了。

# 1. 可以参照sass的格式并在其附近添加下面这两句，用于匹配less文件的处理
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

# 2. 在getStyleLoaders函数中新增如下配置：
      {
        loader: require.resolve('less-loader')
      } 
                  
# 3. 在module.rules中新增如下配置，依旧可以参照sass：
 {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
         
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

这么一通搞下来就差不多了。

2. 主角来了