react暴露后 antd按需加载和自定义主题

react项目，yarn eject后暴露出webpack版本为
"webpack": "4.19.1", "webpack-dev-server": "3.1.14",
，相对于以前的 "webpack": "3.8.1","webpack-dev-server": "2.9.4",有大的不同，
其中将以前的webpack.config.dev.js和webpack.config.prod.js合并成webpack.config.js。
现在我们来对比下如何在新的"webpack": "4.19.1"中添加less-loader，并且通过插件babel-plugin-import实现antd的按需加载。

1 安装babel-plugin-import 和less-loader

yarn add babel-plugin-import
yarn add antd
yarn add less less-loader

2.1 修改package.json：添加antd库的样式

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
  }

提示:如果在package.json中没有看到上面的形式，则需要先 reject项目。
2.2 定制主题
由于antd样式使用less开发的，所以我们可以定义全局变量进行覆盖

yarn reject

复制代码修改配置环境（webpack.config.js）
定义全局变量

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

复制代码配置less-loader

//@To-do 原来的内容
// Adds support for CSS Modules, but using SASS
          // using the extension .module.scss or .module.sass
 {
            test: sassModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },
              'sass-loader'
            ),
 },
 
//@To-do 添加如下内容
 
   {
            test: lessRegex,
            exclude: lessModuleRegex,
            use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
          },
          // Adds support for CSS Modules, but using SASS
          // using the extension .module.scss or .module.sass
          {
            test: lessModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },
              'less-loader'
            ),
 },

复制代码定义全局样式

//@To-Do 注释原来内容  
// if (preProcessor) {
  //   loaders.push(require.resolve(preProcessor));
  // }
 
//@To-do 新添加内容
  if (preProcessor) {
    let loader = require.resolve(preProcessor)
    if (preProcessor === "less-loader") {
      loader = {
        loader,
        options: {
          modifyVars: { //自定义主题
            'primary-color':' #1890ff ',
          },
          javascriptEnabled: true,
        }
      }
    }
    loaders.push(loader);
  }
  return loaders;

复制代码修改package.json

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true  //修改处
        }
      ]
    ]
  }

作者：sbwxffnhc
链接：https://juejin.im/post/5c3964986fb9a049b41cb040
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。