react执行yarn eject后配置antd的按需加载
第一步:
用create-react-app创建完成项目后,执行yarn eject
。在config文件夹会显示配置文档
第二步:
添加插件yarn add babel-plugin-import --save-dev
yarn add antd --save-dev
第三步:在congif文件夹下webpack.config.dev.js第147行添加代码
options: { + plugins: [ + ['import', [{ libraryName: "antd", style: 'css' }]], + ], // 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, },
第四步:在config文件下webpack.config.prod.js第154行添加
options: { + plugins: [ + ['import', [{ libraryName: "antd", style: 'css' }]], + ], compact: true, },
第五步:在页面引入antd
import { Button } from 'antd';
按需加载完毕