react配置config-overrides.js文件，按需引入Antd以及less

最近在熟悉react，通过react create app创建项目后，并不像以前一样可以进行webpack的配置，官方文档有写到可以npm run eject暴露所有配置，会发现根目录下生成了 config 目录，但是此操作是不可逆的。

如果需要在项目中配置一些webpack配置，需要在根目录下新建一个名称为config-overrides.js的文件

1、下载antd 包

npm install antd

2、安装customize-cra，引入react-app-rewired插件

react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置

npm install react-app-rewired customize-cra babel-plugin-import

3、自定义less-loader,改变antd默认样式

npm install less less-loader

4、在根目录下面新建config-overrides.js，并修改相关配置

const { override, fixBabelImports, addLessLoader, addWebpackAlias } = require("customize-cra");
const path = require("path");

module.exports = override(
  // 针对antd 实现按需打包：根据import来打包 (使用babel-plugin-import)  
  fixBabelImports("import", {    
    libraryName: "antd",    
    libraryDirectory: "es",    
    style: true, //自动打包相关的样式 默认为 style:'css'  
  }),
  // 使用less-loader对源码重的less的变量进行重新制定，设置antd自定义主题  
  addLessLoader({  
    javascriptEnabled: true,    
    modifyVars: { "@primary-color": "#1DA57A" },  
  }),
  //增加路径别名的处理 
  addWebpackAlias({  
    '@': path.resolve('./src')  
  })
); 

5、修改packge.json 的配置文件

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

6、最后，在app.js引入需要的组件即可

import { Button, Table } from "antd";