在createreactapp-中-npm-run-eject暴露配置之后配置按需加载和lessloader的方法

使用 create-react-app 创建项目

首先使用 create-react-app 创建项目

create-react-app my-app

进入项目

cd my-app

暴露出配置

npm run eject

配置 less（先安装 npm i less@^2.7.3 less-loader）

// 找到这里
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// 添加两行
const lessRegex =/\.less$/;
const lessModuleRegex=/\.module\.less$/;

// 找到此位置
 {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            },
// 这里进行添加
// Less 解析配置
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              )
            },

按需加载 antd（npm i babel-plugin-import）便于前端性能优化

// 找到 oneOf 下面的 test:/\.(js|mjs|jsx|ts|tsx)$/, 然后再 plugins 里面添加代码：test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve('babel-preset-react-app/webpack-overrides'),

// 在 plugins 里添加
['import',{"libraryName":"antd",style:true}
                  ]