随着前端应用的不断发展，我们需要为我们的应用加入一些图标来提高用户体验。通常情况下我们会生成不同类型的图标并手动添加到不同的目录下，但这一过程繁琐又易错。本文主要介绍一个 npm 包 webpack-favicons-manifest，该包可以帮助我们自动生成不同类型的图标，并自动将生成的图标注入到 html 中，大大简化了添加图标的过程。
安装
在使用该包之前，我们需要先安装 webpack 和 webpack-cli，并在项目中安装该包。
npm install webpack webpack-cli webpack-favicons-manifest --save-dev
使用
以下是一个基本的 webpack 配置文件，包含使用 webpack-favicons-manifest 自动生成图标的配置。
-- -------------------- ---- ------- ----- --------------------- - ------------------------------------- ----- ---- - ---------------- -------------- - - ----- -------- - --- ----------------------- ---------------------- ---------------------- ------------------- ---- ---- ----- ------------------------ -- ---- --------- - -------- --------- --------------- ----- -- -- ----- -------------- ----- ------------- ----------------------- ----------- ------- ------------ ---------- ------ - -- ------------------------ -- ---------------------------------- -------- ----- ---------- ----- ------------- ----- ------ ----- --------- ----- -------- ----- -------- ----- ------- ---- - - -- - --展开代码
这样配置后，Webpack 会在生成的 HTML 中自动引入图标标签，我们就可以愉快地使用了！
深度学习
根据上面的例子，我们可以看到 FaviconsWebpackPlugin 中嵌套了一个 favicons 的配置对象，该对象用于配置生成的图标信息。下面我们对一些常用的配置项进行讲解。
appName
该属性用于设定应用名称，必填。
appShortName
该属性用于设定应用的短名称。
appDescription
该属性用于设定应用简介。
developerName
该属性用于设定应用的开发者名称。
developerURL
该属性用于设定应用的开发者网址。
background
该属性用于设定应用的背景颜色。
theme_color
该属性用于设定应用的主题颜色。
icons
该属性用于定义不同尺寸与类型的图标。
start_url
该属性用于设定应用启动后展示的页面路径。
示例代码
-- -------------------- ---- ------- ----- --------------------- - ------------------------------------- ----- ---- - ---------------- -------------- - - ------ ----------------- ------- - --------- ------------ ----- ----------------------- ------- -- -------- - --- ----------------------- ----- ------------------------ --------- - -------- --------- --------------- ----- -- -- ----- -------------- ----- ------------- ----------------------- ----------- ------- ------------ ---------- ------ - -------- ----- ---------- ----- ------------- ----- ------ ----- --------- ----- -------- ----- -------- ----- ------- ---- - - -- - --展开代码
现在你已经掌握了 webpack-favicons-manifest 的基本使用方法。通过 webpack-favicons-manifest，您可以非常简便地管理您的应用程序图标，以便将更多的精力放在您应用程序的核心业务上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e781e8991b448e08b8
