antd样式按需加载

下图是antd官网给的按需加载方式，虽然就这么两行字，却花了我半天的时间实现，真的心累
我的react项目是使用create-react-app脚手架创建的 主要有两个原因：
1：不知道.babelrc在哪
2：不知道babel-loader option在哪

查了半天资料，后来发现： .
babelrc存在于src根目录下，需要手动创建，
babel-loader option在配置文件webpack.config.js里面

正题开始

方式一：使用.babelrc

1、安装依赖npm install babel-plugin-import -save , 在src目录下面创建.babelrc文件

2、将官网的那段代码干过来就行

{
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css" // `style: true` 会加载 less 文件
            }
        ]
    ],
}

3、运行之后如果不出意外，会报下图错误，大概意思就是说在package.json和.babelrc
都有babel的配置，需要移除一个

这样的话我觉得，可能把.babelrc 里面的代码直接加到package.json babel配置里面可能也能生效，我没尝试过，有兴趣的可以尝试一波

4、然后我就去package.json里面看了一下，在最下面看到了如下的babel配置，然后
我就把package.json里面的下图代码删掉了，并将presets移到了.babelrc文件里

5、最终实现配置如下

{
    "plugins": [
        [
            "import",
            {
                "libraryName": "antd",
                "libraryDirectory": "es",
                "style": "css" // `style: true` 会加载 less 文件
            }
        ]
    ],
    "presets": [      
        "react-app"
    ] 
}

方式二：使用babel-loader option

1、 安装依赖npm install babel-plugin-import -save执行npm run eject，将配置文件暴露出来

注意: 此操作是不可逆的,他会暴露创建react时候的webpack的配置,而且这个命令只能在 刚刚使用
脚手架创建好项目之后运行(文件的结构不能发生改变的时候才能暴露)

2、进入webpack.config.js文件，找到配置babel的位置

3、将下面代码干到指定位置即可

  				["import", {
                    libraryName: "antd", 
                    libraryDirectory: "es",
                    style: 'css' // `style: true` 会加载 less 文件
                  }]

方式三：使用react-app-rewired（网上比较推荐这个）

1、安装依赖 yarn add react-app-rewired customize-cra babel-plugin-import
一次安装三个,也可以分开安装。

如果安装失败，可以尝试给react-app-rewired指定版本，也可以尝试执行一下npm install

2、然后进入到package.json修改scripts

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  },

3、在项目应用的根目录下src创建config-overrides.js文件，代码如下：

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

这种方式官网有比较详细的教程