createreactapp中按需加载antd

使用 create-react-app 脚手架创建出来的 react 项目，他的配置项是隐藏的，如果想要修改原始的配置项，需要npm run eject, 但是这个操作是不可逆的，一般情况下我们不会去直接修改他的原始配置项。

那么如果我想在用 create-react-app 脚手架创建的项目中使用 antd design 官方推荐的按需加载要怎么添加自己的配置项呢？此时我们可以用 react-app-rewired 来实现。

第一步：安装 antd 按需加载的插件babel-plugin-import

npm install babel-plugin-import --save-dev

第二步：安装react-app-rewired

$ npm install react-app-rewired --save-dev

react-app-rewired 是一个再配置的工具。安装完之后在根目录新建一个 config-overrides.js 的文件，在这个配置文件中新增加自己的自定义配置，可以实现在不 eject 的情况下自定义配置。

第三步：安装customize-cra

npm install customize-cra --save-dev

使用 customize-cra 要确保先安装了 react-app-rewired。
接下来就可以来配置按需加载了。
首先在项目的根目录下新建一个 config-overrides.js 文件，接下来在这个文件中写我们自己的配置

const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {        
        libraryName: 'antd',        
        libraryDirectory: 'es',       
        style: 'css'
    })
)

之后在组件中测试

import React, {Component} from 'react';
import {Button} from 'antd';
class Test extends Component {render() {
        return (
            <div>
                <Button type="primary"> 点击 </Button>
            </div>
        )
    }
}
export default Test;

这样就可以实现按需加载 antd 的组件，并且无需手动引入样式了。