在前端开发中，icon 在网页中扮演着非常重要的角色。 而生成这些 icon 的过程，由于不断的更改 icon 大小、格式、文件名等等问题，往往出现了许多的困难。为了解决这样的难题，我们可以使用 mora-favicons-webpack-plugin 来生成各种大小、格式、文件名以及 type 的 icon。
mora-favicons-webpack-plugin 介绍
Mora-favicons-webpack-plugin 是一个 webpack 插件，通过一次配置，生成所需要的各种 icon。通过 webpack 配合使用，生成 icon 对于项目的变更也变得更加便捷。mora-favicons-webpack-plugin 还提供了许多定制化的参数，可以用于更加针对性的生成我们需要的 icon。
mora-favicons-webpack-plugin 的使用
在项目中使用 mora-favicons-webpack-plugin，我们需要在项目的 package.json 文件中添加依赖。
npm install --save-dev mora-favicons-webpack-plugin
安装完成后，我们可以像下面这样在 webpack 中使用：
const MoraFaviconsWebpackPlugin = require('mora-favicons-webpack-plugin')
module.exports = {
plugins: [
new MoraFaviconsWebpackPlugin(options)
]
}这样，配置就完成了。
mora-favicons-webpack-plugin 的参数详解
在 MoraFaviconsWebpackPlugin 的构造函数中，支持传递一个参数对象，用于控制生成 icon 的各种参数。下面是一份详细的 API，用于控制各种生成参数：
-- -------------------- ---- -------
-
----- ------- -- ---- ----
----------- --- ------- ------- -- ----
------- --- -- ------- ----
------- ----- -- -------- ------- -- ---- -
------ --- -- ------------------
----------- --- -- ---------- ------- - ------- ---- --
----- -------- -- ---- -----
-------------------- -------------------- -- --------
-------- ------------- -- --------
------------ ----------- -- ------------
---------- -------------------------- -- ----
-------- ------ -- --- -----------
-------- ------ -- ----------
------------- ------------- -- ---- ------- - ---- ----
--------- - -- -------- ---
-------- ----- -- ----
------------- ----- -- -----
--------------- ----- -- ----
-------------- ----- -- -----
------------- ----- -- --- ---
-------- ----- -- ---
----------- ----- -- -----
------------ ----- -- -------
------ -
-------- ----- -- -- ------- ----
---------- ----- -- ---- ----------------
------------- ----- -- ---- ----- ----
------ ----- -- ---- ----- ----- ----
--------- ----- -- ------ -------
-------- ----- -- ---- ------- -- ----
-------- ----- -- ---- ------- - ----
------- ---- -- ---- ------ ------- ----
-
-
-mora-favicons-webpack-plugin 示例
下面是一个使用 mora-favicons-webpack-plugin 的示例，我们将使用 mora-favicons-webpack-plugin 来生成不同类型的 icon。
-- -------------------- ---- -------
----- ---- - ---------------
----- ------------------------- - ---------------------------------------
--- ------ - -
----- --------------
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- ---------------------------
----- ----------------------
----------- ---------
------- ----------
--------- -
-------- ----- -------- ------- --------
------------- -----
--------------- -- ---------------------------- ----- ------
-------------- -----
------------- -----
-------- --------
----------- ----------
------------ ----------
------ -
-------- -----
---------- -----
------------- -----
------ -----
--------- -----
-------- -----
-------- -----
------- ----
-
-
--
-
--
-------------- - ------这段代码为我们在网页中生成了所需的 apple-touch-icon、windows 8 标题图标、chrome 应用商店图标等 icon，在多个设备上都能够完美兼容。
结论
使用 mora-favicons-webpack-plugin 这个 npm 包能够轻松地在网页中生成所需的多样化格式、尺寸、文件名、type 等各种 icon，并且还能够进一步配置参数和控制生成各种 icon 的形式。我们在实际使用这个 npm 包时，应该根据实际使用场景，采用一些合适的配置，来生成所需的 icon。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005585081e8991b448d5865