在前端开发中，我们经常需要对网站进行打包和构建，而 webpack 是一个非常常用的前端构建工具，它的作用是将多个文件打包成一个文件，减少请求次数，提高网站速度。同时，我们也需要为网站添加一个独特的图标，表示网站的特色，这个图标也称为 favicon。本文将介绍 webpack 构建时 favicon 的几种方式。
1. 使用 html-webpack-plugin
html-webpack-plugin 是一个可自定义 HTML 模板的 webpack 插件，它可以在构建时自动为我们生成包含指定 favicon 的 HTML 文件。
安装：
npm install --save-dev html-webpack-plugin
在 webpack.config.js 中添加：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-------- -
--- -------------------
------ --- -----
-------- ------------------------
---
--
--2. 使用 file-loader
file-loader 是一个负责将文件复制到输出目录并返回引用地址的 webpack 加载器，它可以将 favicon 复制到 dist 目录并通过指定的地址引用。
安装：
npm install --save-dev file-loader
在 webpack.config.js 中添加：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------------------------------
------- --------------
-------- -
----- ---------------
----------- ----------
----------- ----------
--
--
--
--
--在 HTML 文件中手动添加 favicon 标签：
<link rel="icon" type="image/png" href="./assets/favicon.png" />
3. 使用 copy-webpack-plugin
copy-webpack-plugin 是一个 webpack 插件，可用于将文件或目录从一个位置复制到另一个位置。它可以将 favicon 复制到输出目录中，并通过指定的地址引用。
安装：
npm install --save-dev copy-webpack-plugin
在 webpack.config.js 中添加：
-- -------------------- ---- -------
----- ---------- - -------------------------------
-------------- - -
-------- -
--- ------------
--------- -
-
----- ------------------------
--- -----
--
--
---
--
--在 HTML 文件中手动添加 favicon 标签：
<link rel="icon" type="image/png" href="./favicon.png" />
结论
以上是 webpack 构建时 favicon 的几种方式，每种方式都有其适用的场景。使用 html-webpack-plugin 可以自动生成 HTML 文件，并将 favicon 加入其中，但需要配置插件；使用 file-loader 可以将 favicon 复制到输出目录并通过指定的地址引用，但需要手动添加标签；使用 copy-webpack-plugin 可以将 favicon 复制到输出目录中，并利用原始文件名自动引用，但需要安装并配置插件。
不同的项目有不同的需求，我们可以根据具体情况选择一种或多种方式来添加 favicon。
示例代码：
本文示例代码可在以下地址进行查看或下载：
https://github.com/malun666/webpack-favicon
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670e22fd5f551281025fcadc