create-react-app中按需加载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的组件，而且无需手动引入样式了。