react中在高版本的webpack配置less

https://blog.csdn.net/xxygreen_hand/article/details/90672774（全配置Less和antd主题）

在学习一些react项目时，视频教程中的webpack版本较低，在我们使用npm run eject 或者yarn eject来暴露配置文件时，

发现在config下没有webpack.config.dev.js和webpack.config.prods.js文件，只有一个webpack.config.js文件。此时要配置less（因为antD是使用less),如下

在webpack.config.js下   配置完之后要重启生效

https://blog.csdn.net/czkcui123/article/details/89515949

1. //找到此位置
2.  
   // style files regexes
3.  
   const cssRegex = /.css$/;
4.  
   const cssModuleRegex = /.module.css$/;
5.  
   const sassRegex = /.(scss|sass)$/;
6.  
   const sassModuleRegex = /.module.(scss|sass)$/;
7.  
    
8.  
   //在此添加如下两个常量
9.  
   const lessRegex =/.less$/;
10.  
    const lessModuleRegex=/.module.less$/;

1. //找到此位置
2.  
   　　 {
3.  
                 test: cssRegex,
4.  
                 exclude: cssModuleRegex,
5.  
                 use: getStyleLoaders({
6.  
                   importLoaders: 1,
7.  
                   sourceMap: isEnvProduction && shouldUseSourceMap,
8.  
                 }),
9.  
                 // Don't consider CSS imports dead code even if the
10.  
                  // containing package claims to have no side effects.
11.  
                  // Remove this when webpack adds a warning or an error for this.
12.  
                  // See https://github.com/webpack/webpack/issues/6571
13.  
                  sideEffects: true,
14.  
                },
15.  
                // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
16.  
                // using the extension .module.css
17.  
                {
18.  
                  test: cssModuleRegex,
19.  
                  use: getStyleLoaders({
20.  
                    importLoaders: 1,
21.  
                    sourceMap: isEnvProduction && shouldUseSourceMap,
22.  
                    modules: true,
23.  
                    getLocalIdent: getCSSModuleLocalIdent,
24.  
                  }),
25.  
                },
26.  
     
27.  
    //在这之后仿照上面添加如下代码
28.  
                {
29.  
                  test: lessRegex,
30.  
                  exclude: lessModuleRegex,
31.  
                  use: getStyleLoaders({
32.  
                    importLoaders: 2,
33.  
                    sourceMap: isEnvProduction && shouldUseSourceMap,
34.  
                  }),
35.  
                  sideEffects: true,
36.  
                },
37.  
                {
38.  
                  test: lessModuleRegex,
39.  
                  use: getStyleLoaders({
40.  
                    importLoaders: 2,
41.  
                    modules: true,
42.  
                    getLocalIdent: getCSSModuleLocalIdent,
43.  
                    sourceMap: isEnvProduction && shouldUseSourceMap,
44.  
                  }),
45.  
                },

1. //找到此位置
2.  
   // style files regexes
3.  
   const cssRegex = /.css$/;
4.  
   const cssModuleRegex = /.module.css$/;
5.  
   const sassRegex = /.(scss|sass)$/;
6.  
   const sassModuleRegex = /.module.(scss|sass)$/;
7.  
    
8.  
   //在此添加如下两个常量
9.  
   const lessRegex =/.less$/;
10.  
    const lessModuleRegex=/.module.less$/;
11.  
     
12.  
    // This is the production and development configuration.
13.  
    // It is focused on developer experience, fast rebuilds, and a minimal bundle.
14.  
    //找到此位置
15.  
     {
16.  
                  test: cssRegex,
17.  
                  exclude: cssModuleRegex,
18.  
                  use: getStyleLoaders({
19.  
                    importLoaders: 1,
20.  
                    sourceMap: isEnvProduction && shouldUseSourceMap,
21.  
                  }),
22.  
                  // Don't consider CSS imports dead code even if the
23.  
                  // containing package claims to have no side effects.
24.  
                  // Remove this when webpack adds a warning or an error for this.
25.  
                  // See https://github.com/webpack/webpack/issues/6571
26.  
                  sideEffects: true,
27.  
                },
28.  
                // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
29.  
                // using the extension .module.css
30.  
                {
31.  
                  test: cssModuleRegex,
32.  
                  use: getStyleLoaders({
33.  
                    importLoaders: 1,
34.  
                    sourceMap: isEnvProduction && shouldUseSourceMap,
35.  
                    modules: true,
36.  
                    getLocalIdent: getCSSModuleLocalIdent,
37.  
                  }),
38.  
                },
39.  
     
40.  
    //在这之后仿照上面添加如下代码
41.  
                {
42.  
                  test: lessRegex,
43.  
                  exclude: lessModuleRegex,
44.  
                  use: getStyleLoaders({
45.  
                    importLoaders: 2,
46.  
                    sourceMap: isEnvProduction && shouldUseSourceMap,
47.  
                  }),
48.  
                  sideEffects: true,
49.  
                },
50.  
                {
51.  
                  test: lessModuleRegex,
52.  
                  use: getStyleLoaders({
53.  
                    importLoaders: 2,
54.  
                    modules: true,
55.  
                    getLocalIdent: getCSSModuleLocalIdent,
56.  
                    sourceMap: isEnvProduction && shouldUseSourceMap,
57.  
                  }),
58.  
                },