最近在配置react项目中antd的按需加载，遇到一些坑，特记录如何解决

环境参数

• react 17.0.2
• webpack 4.44.2
• less 3.11.1 (默认没有，需手动安装)
• less-loader 6.1.0 (默认没有，需手动安装)
• babel-plugin-import 1.13.3 (默认没有，需手动安装)

注意：配置项中的版本需严格控制，否则很大可能报错，我的react项目是经过eject过的，没有的话的请看antd官网配置教程

第一步

安装上面3个库，注意版本

第二步

根目录建立.babelrc文件，删除掉package.json中babel字段配置，在.babelrc新建配置：

// .babelrc
{
  "presets": [
    "react-app"
  ],
  "plugins":
  [
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

接下来在config文件下的webpack.config.js中找到babelrc字段，把它改成true：

第三步

在webpack.config.js添加less的配置：

在module.rules中配置less-loader，位置在sass-loader后面

第四步

找到getStyleLoaders函数，在其中进行修改：

第五步

配置自定义主题样式

最后收工，按需加载和自定义主题配置完成