将 favicon 添加到 webpack (1)

📌 相关文章

📜 将 favicon 添加到 webpack (1)

📅 最后修改于: 2023-12-03 15:25:13.643000 🧑 作者: Mango

将 Favicon 添加到 webpack

Favicon 是指网站的图标，通常出现在浏览器的标签页或收藏夹中。在 webpack 中，我们可以通过使用 favicons-webpack-plugin 插件将 Favicon 添加到应用程序中。

步骤

安装插件

npm install --save-dev favicons-webpack-plugin

添加插件配置

在 webpack 配置文件中添加 FaviconsWebpackPlugin 插件配置，如下所示：

const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new FaviconsWebpackPlugin({
      // logo: favicon 图标的路径
      logo: './src/assets/favicon.png',
      // 输出图标的文件名和路径，可以使用 [hash] 占位符
      outputPath: './assets/',
      // 是否将生成的 HTML 代码自动注入到页面中
      inject: true
    })
  ]
};

logo 用于指定 Favicon 图标的路径。可以是一个相对路径、绝对路径或一个 URL。

outputPath 用于指定输出图标的文件名和路径。

inject 用于确定是否将生成的 HTML 代码自动注入到页面中。

在 HTML 中使用

在 HTML 文件中将 <link> 标签添加到页面的 <head> 部分：

<head>
  <!-- ... -->
  <link rel="shortcut icon" href="./assets/favicon.ico">
</head>

这将链接到生成的 .ico 文件作为 Favicon 图标。

结论

使用 favicons-webpack-plugin 插件可以很容易地将 Favicon 添加到 webpack 应用程序中。在将插件添加到 webpack 配置文件之后，我们不需要手动上传和链接图标。插件将生成所需的 HTML 代码和图标文件并将其添加到输出目录中。