react16.8 antd按需加载配置

配置按需加载

1.安装react-app-rewired 取代react-script，可以扩展webpack的配置，类似vue.config.js

npm install react-app-rewired@2.0.2-next.0 babel-plugin-import --save

2.在项目的根目录下（src同级）新建一个config-overrides.js的文件，配置如下

const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config, env) {
  config = injectBabelPlugin(
    // 在默认配置基础上注入
    // 插件名，插件配置
    ["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }],
    config
  );
  return config;
};

3.用法
在需要用到antd组件的js文件中引用，例如：

import {Button} from 'antd'

4.最后一步很重要

找到package.json 文件 “scripts” 的“start” 启动项改成“react-app-rewired start”

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

5.重启启动，即可生效