在使用 Webpack 打包前端项目过程中，我们经常会将网站图标（favicon.ico）放在项目根目录下。但在项目打包后，访问网站时却发现图标无法加载，控制台上提示 404 错误。这是因为在 Webpack 中，网站图标需要进行特殊的处理，才能正确加载。
本文将为大家详细介绍如何解决 Webpack 打包后 favicon.ico 出现 404 错误的问题。
问题分析
在 Webpack 打包后的项目中，所有资源文件都会被打包成一个或多个 JS 文件。而网站图标（favicon.ico）作为一个静态资源文件，也会被打包进其中。
但是，浏览器在请求网站图标时，会直接访问 http://www.example.com/favicon.ico 这个地址，而不会像 JS 文件一样通过 Webpack 的 require 引入资源。因此，如果我们在 Webpack 打包后的项目中，没有对网站图标进行额外的处理和引入，浏览器就无法找到该文件，从而出现 404 错误。
不过，我们可以通过 Webpack 的插件来对网站图标进行处理，并将其正确引入到项目中，从而解决这个问题。
解决方案
使用 html-webpack-plugin 插件
html-webpack-plugin 是 Webpack 中常用的插件之一，它可以将 Webpack 打包后的 JS 文件注入到 HTML 文件中，从而减少手动维护 HTML 文件的工作量。
在这里，我们可以利用 html-webpack-plugin 的能力，将网站图标引入到生成的 HTML 文件中，从而避免浏览器请求 favicon.ico 地址时出现 404 错误。操作步骤如下：
- 安装插件：
--- ------- ---------- -------------------
- 在 Webpack 配置文件中引入插件：
----- ----------------- - -------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
-------- --------------------
-- ---
---
-- ---
--
--这里，我们在 HtmlWebpackPlugin 的配置中，将 favicon 字段设置为网站图标所在的路径（相对于项目根目录），然后在生成的 HTML 文件中引入即可。
使用 copy-webpack-plugin 插件
copy-webpack-plugin 是另一个常用的 Webpack 插件，它可以将一个或多个文件或文件夹直接复制到打包后的目录中，而无需对其进行额外的处理。
在这里，我们可以使用 copy-webpack-plugin 来直接将网站图标复制到打包后的目录中。操作步骤如下：
- 安装插件：
--- ------- ---------- -------------------
- 在 Webpack 配置文件中引入插件：
----- ----------------- - -------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
--------- -
- ----- -------------------- --- ---- --
--
---
-- ---
--
--这里，我们在 CopyWebpackPlugin 的配置中，将 patterns 字段设置为要复制的文件所在的路径（相对于项目根目录），以及复制到该文件的目标路径（也相对于项目根目录）。在打包后，网站图标就会被复制到正确的位置，从而可以成功加载。
示例代码
使用 html-webpack-plugin
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- -------------------
--------- -------------------
-------- --------------------
---
--
--使用 copy-webpack-plugin
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- -------------------
--------- -
- ----- -------------------- --- ---- --
--
---
--
--总结
在使用 Webpack 打包前端项目时，由于浏览器会直接访问网站图标，而不会像 JS 文件一样先通过 Webpack 的 require 引入资源，因此可能会出现 404 错误的问题。在这里，我们介绍了两种常用的解决方案，即使用 html-webpack-plugin 或 copy-webpack-plugin 插件。相信通过本文的介绍，大家已经可以轻松处理好网站图标的加载问题啦~
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6549b68f7d4982a6eb3f4316