Webpack 打包后 favicon.ico 出现 404 错误的解决方法

在使用 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 错误。操作步骤如下：

1. 安装插件：

npm install --save-dev html-webpack-plugin

1. 在 Webpack 配置文件中引入插件：

// javascriptcn.com 代码示例
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      favicon: './src/favicon.ico',
      // ...
    }),
    // ...
  ],
};

这里，我们在 HtmlWebpackPlugin 的配置中，将 favicon 字段设置为网站图标所在的路径（相对于项目根目录），然后在生成的 HTML 文件中引入即可。

使用 copy-webpack-plugin 插件

copy-webpack-plugin 是另一个常用的 Webpack 插件，它可以将一个或多个文件或文件夹直接复制到打包后的目录中，而无需对其进行额外的处理。

在这里，我们可以使用 copy-webpack-plugin 来直接将网站图标复制到打包后的目录中。操作步骤如下：

1. 安装插件：

npm install --save-dev copy-webpack-plugin

1. 在 Webpack 配置文件中引入插件：

// javascriptcn.com 代码示例
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: './src/favicon.ico', to: './' },
      ],
    }),
    // ...
  ],
};

这里，我们在 CopyWebpackPlugin 的配置中，将 patterns 字段设置为要复制的文件所在的路径（相对于项目根目录），以及复制到该文件的目标路径（也相对于项目根目录）。在打包后，网站图标就会被复制到正确的位置，从而可以成功加载。

示例代码

使用 html-webpack-plugin

// javascriptcn.com 代码示例
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      favicon: './src/favicon.ico',
    }),
  ],
};

使用 copy-webpack-plugin

// javascriptcn.com 代码示例
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: './src/favicon.ico', to: './' },
      ],
    }),
  ],
};

总结

在使用 Webpack 打包前端项目时，由于浏览器会直接访问网站图标，而不会像 JS 文件一样先通过 Webpack 的 require 引入资源，因此可能会出现 404 错误的问题。在这里，我们介绍了两种常用的解决方案，即使用 html-webpack-plugin 或 copy-webpack-plugin 插件。相信通过本文的介绍，大家已经可以轻松处理好网站图标的加载问题啦~

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6549b68f7d4982a6eb3f4316