配置按需加载
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.重启启动,即可生效