react项目，npm run eject之后生成webpack.config.js文件配置less和ant按需加载的问题

• 在create-react-app v 2.1.8，和node v10.15.2的环境下，通过npm run eject暴露出配置时候，webpack配置文件只有webpack.config.js（因为官方脚手架升级了）

  
  
  

  image.png
• 配置less （先按装npm i less@^2.7.3 less-loader）less必须小于3.0版本否则会报错

// 找到这里
// 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,
              }),
            },
//这里进行添加
 {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              },
              'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              },
              '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}
                  ]

image.png