webpack - 如何从库中仅添加必要的图标？网页包

Question

我使用了 antd lib，我发现哪些图标占据了我主要块的 1/3。

我只想添加必要的图标并尝试使用ContextReplacementPlugin：

new ContextReplacementPlugin(/@ant-design[/\\]icons[/\\]lib[/\\]dist$/, /ReloadOutline/), // example

但是，这不起作用。

这是分布。我认为需要将 es5 转换为 es6 以进行右摇树

标签： webpack

Answer 1

Ant Design 网站的FAQ 部分有这样的说法（我很确定它也适用于图标）：

我只想使用菜单/按钮（等），但似乎我必须导入整个 antd 及其样式。

试试babel-plugin-import，或者用这种方式导入你需要的东西：

import Menu from 'antd/es/menu';
import 'antd/es/menu/style/css';

或（带有摇树的 ES6 方式）：

import { Menu, Breadcrumb, Icon } from 'antd';