按需加载是bable-plugin-import去实现的
首先安装 yarn add bable-plugin-import;
一种是 package.json 里面去配置; 前面有一篇已经写过;
https://blog.csdn.net/wangrong111222/article/details/80766773
还有一种是在webpack 配置文件里里面去配;
eject 暴露出来
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
plugins:[['import',{
"libraryName":"antd",
"style":true
}]],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
这种js 的配置有俩 注意: 是 处理 babel那个 ;别找错了;
把 plugins 加入 options里就完事了;
把这玩意给dev 和prod 各一份 ;
对了 less 版本要降到 2.7.3 否则 就报错 ;
如果没有eject 暴露 配置项的话那么引入js 去实现 ,antd 官网上有 ,和less 版本也兼容
安装react-app-rewired 包;
新建 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;
};
然后 就可以用了