react16.8 antd按需加载配置(已经弹出和未弹出分别的配置)

今天在配置antd按需加载的时候，遇到一问题，估计因为项目周期的原因，也就项目开始的时候配置一下，所以很多时候容易忘记，特此整理一下(只是我觉得比较好用的一种)

1. 误区，antd按需加载同样是需要先安装antd，只是通过插件的配置实现不用再进行样式的引入，可以直接引用antd组件进行开发

2. 怎样判断按需加载配置成功？通过组件引用的判断，在不引入antd样式的前提下，直接引入，使用组件，看组件样式是否有效，如果生效则按需加载配置成功

3. 完成的配置流程（目前的项目是在弹出之后，进行的antd的配置）
   （1）安装antd
   npm i antd --save
   （2）安装babel-plugin-import插件
   npm -s install babel-plugin-import
   (3)配置webpack，因为现在的时候，我的webpack是很高级的版本，即是在配置弹出后，没有单独的webpack.dev.js和webpack.prod.js的配置文件，而现在只有一个webpack配置文件
   
   在webpack里面找到babel-loader，因为babel-plugin-import是通过babel的，所以进行如果的配置
   (如果没有这个配置的话，组件引入以后的css样式是没有的)

         [
           require.resolve('babel-plugin-import'),// 导入 import 插件
           {
             libraryName: 'antd',   //暴露antd
             style: 'css'
           }
         ],
   

成功


4.当项目在没有进行弹出的时候，是没有办法看到webpack的配置的，所以这种时候，就需要在另一种情况下进行按需加载的配置
安装插件

npm -s install babel-plugin-import

在根目录下创建一个文件config-overrides.js文件
config-overrides.js，添加文件内容如下

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

注释掉原本的样式引入