React 之 config-overrides覆盖create-react-app配置、按需加载antd

一、 config-overrides配置

通过react脚手架create-react-app创建的项目，无需eject暴露配置如何对项目进行配置

1. 根目录下创建config-overrides.js文件
2. 安装customize-cra依赖

   npm install react-app-rewired customize-cra -D
   or
   yarn add react-app-rewired customize-cra -D
   

3. 修改package.json里的启动配置（修改后）

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

二、 按需加载antd

1. 安装babel-plugin-import依赖

   npm install babel-plugin-import -D
   or
   yarn add babel-plugin-import -D
   

三、 完整config-overrides.js文件（demo)

1. antd按需加载、路径用@处理

   const { override, fixBabelImports, addWebpackAlias} = require('customize-cra')
   const path = require('path')
   
   module.exports = override(
     fixBabelImports('import', {
       libraryName: 'antd',
       libraryDirectory: 'es',
       style: 'css'
     }),
     addWebpackAlias({
       ['@']: path.resolve(__dirname, 'src')
     })
   )