前言
在前端开发中，前端工程化已成为必不可少的一环。托管于 npm 的包管理系统让我们更方便的使用第三方库和工具。而本文介绍的 @jike-fe/favicons-webpack-plugin 则是一款让生成网站图标变得更加简单的 webpack 插件。本文将详细讲解如何使用该插件，旨在帮助更多的前端开发者更好地使用它。
什么是 @jike-fe/favicons-webpack-plugin
@jike-fe/favicons-webpack-plugin 是一款 webpack 插件，可将网站的 logo 转换为多种尺寸的图标，并生成相应的 HTML 代码。该插件的优点在于：
- 自动根据原始图片生成适应各种设备的不同尺寸图标
- 支持各种主流浏览器及移动设备的图标
- 可以根据需要配置各项参数
安装
在使用该插件前，需要先将其安装到项目中。可使用以下命令：
npm install @jike-fe/favicons-webpack-plugin --save-dev
使用
配置 webpack
在使用 @jike-fe/favicons-webpack-plugin 前，需要对 webpack 进行一些配置。可按照以下步骤进行：
添加依赖
首先需要添加依赖：
npm i -D file-loader webpack webpack-cli html-webpack-plugin
其中 html-webpack-plugin 是一个可以在 webpack 中自动插入生成的 HTML 文件的插件。
引入插件
在 webpack.config.js 文件中，需要引入 @jike-fe/favicons-webpack-plugin 和 html-webpack-plugin。在这里，我们使用一个最简单的配置：
-- -------------------- ---- -------
----- --------------------- - --------------------------------------------
----- ----------------- - -------------------------------
-------------- - -
-- ---------
-- ---
-------- -
--- -------------------- -- ------ -------- - --------
--- -----------------------
----- ---------------------
---
--
--上述配置中，favicon 会在 output.path 指定的路径中生成。
运行
在进行了上述的配置后，可以使用 npm run dev 命令启动开发服务器，生成多个尺寸的图标并插入 HTML 中。
配置文件
@jike-fe/favicons-webpack-plugin 支持多个参数配置，使用户可以根据项目需要自定义生成的 favicon，支持的配置项如下：
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| logo | string | null | 编译时需要移动的原始图像资源 |
| cache | boolean | true | 缓存g favicons。在某些情况下需要手动清除favicons目录 |
| inject | boolean | true | 将favicon标签插入到HTML文件中 |
| favicons | object | {} | 自定义favicons选项，按照中webpack favicons options文档的格式填入 |
| prefix | string | '' | prefix传递到htmlWebpackPlugin选项，用于HTML中所有URL/文件名的前缀 |
| publicPath | string | null | publicPath传递到htmlWebpackPlugin选项，用于HTML中所有URL/文件名的前缀 |
| outputPath | string | null | 输出文件名字 and 目录 |
| manifestFileName | string | 'favicons-manifest.json' | 自动生成的.json 文件名 |
| icons | object | {} | 手动添加额外的图标，详见下文 |
| emitStats | boolean | false | 输出统计文件以供分析 |
| injectHtml | boolean | true | 选择原生的 html-webpack-plugin 时，自动注入 favicon 标签 |
| faviconsContext | string | null | 手动设置 favicons-webpack-plugin 上下文路径。在某些情况下使用相对 URL |
| faviconsOutput | string | './favicons' | favicons-webpack-plugin 输出路径 |
示例
图标样式
-- -------------------- ---- -------
--- -----------------------
----- ----------------------- --------- ------------
--------- -
-------- ------
------------- ----
--------------- ----- -- -------
-------------- --------
------------- -------------------
---- -------
----- --------
----------- ----------
------------ ----------
-------- -------------
------------ ------
---------- ----
-------- ------
-------- ------
---------- ------
---------------------------- -----
---------------------- ------
------ -
-------- ------
-------- ------
--
--
---额外的图标
-- -------------------- ---- -------
--- -----------------------
----- ----------------------- --------- ------------
------ -
-- ----- ----- ----
---------- -
------- -----
----------- -----
----- -----
--
-- ----- ------- ---
------------- -
------- -----
----------- -----
--
-- ------- -----
-------------- -
------- -----
----------- ------
--
--
---深度自定义选项
-- -------------------- ---- -------
--- -----------------------
----- ----------------------- --------- ------------
--------- -
-------- ----------
--------------- --- ------- -----
-------------- ------ -- -------
------------- ---------------------------
----------- ----------
------------ ----------
------ -
-------- ------
------ ------
------- ------
--
--
------- -------------
----------- ------------------------------
----------- -------------------
---------------- -----------------
--------------- ------------------
---------- -----
----------- -----
------- -----
------ -----
---结语
使用 @jike-fe/favicons-webpack-plugin 插件可以很快地生成适应各种设备的不同尺寸图标，并且可以根据需要进行高度自定义。本文介绍了该插件的基本使用方法及其常用参数，文中的示例代码可以供初学者参考。希望本文能对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c3181e8991b448ebc02