antd按需加载及配置自定义antd主题

react中antd按需加载及配置自定义antd主题

基于create-react-app脚手架开发。
react版本16.13.1；antd版本4.10.3。

按需加载

一、使用 babel-plugin-import 插件（配置 babel-loader option）

首先讲一下通过 babel-plugin-import 这个插件并配置 babel-loader option 来实现的按需加载方式。

安装 babel-plugin-import ：

//npm
npm install babel-plugin-import

//yarn
yarn add babel-plugin-import

安装完插件之后需要修改 config 文件夹下的 webpack.config.js 文件。注意，如果没有这个文件的话，应该是没有执行 npm run eject 指令将配置文件暴露出来。

打开 webpack.config.js 文件，找到 babel-loader 位置

只需要在 plugins 中加入一行代码即可。

//注意，如果没有将 webpack.config.js 文件中的scss修改为less的话，可以将style: true 改为 style: 'css'。style: true 会加载 less 文件。
['import', {
    libraryName: "antd", style: true }]

二、配置 .babelrc 文件

.babelrc 文件本身不存在，需要手动创建，创建在于src根目录下（与index.js同层级）

这个方式同样需要安装 babel-plugin-import 依赖
并且在src文件夹下创建 .babelrc 文件

//npm
npm install babel-plugin-import

//yarn
yarn add babel-plugin-import

在 .babelrc 文件中写入以下代码

{
   
    "plugins"