webpack自动生成网站图标详解：favicons-webpack-plugin配置与兼容指南

介绍

在搭建项目时，主管可能会提供一张logo图片，要求自行转换为网站图标。有时项目需求不仅包含多种尺寸的favicon.ico，还涉及Android和iOS在apple-touch-icon等私有属性下的各种尺寸图标。虽然存在在线工具或本地软件可供使用，但操作过程可能令人烦躁。是否考虑过完全忽略手动任务，让项目构建打包后自动生成图标，从而省去繁琐操作？本文将介绍一个名为html-webpack-plugin的插件（注：实际应为favicons-webpack-plugin，此处保留原文表述但修正语境），它能自动将图片处理成各种格式和尺寸的图标，实现便捷省心。

准备

首先准备用于生成图标的原始图片，格式可以是jpg、png或svg。为了演示效果，我们将每种格式各准备一份。

接下来，在webpack.config.js中编写基础结构，配置如下：

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const plugins = [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin({
    filename: "index.html",
    template: path.resolve(__dirname, "public/index.html")
  })
]
module.exports = {
  // ...
  plugins
}

随后，我们需要在plugins数组中进行相关配置。

使用

首先进行安装操作。

# NPM
npm i -D favicons favicons-webpack-plugin
# YARN
yarn add -D favicons favicons-webpack-plugin

需要安装两个组件：一个是favicons-webpack-plugin，即插件主体；另一个是favicons，这是一个用于生成网站图标及相关文件的Node.js模块。实际上，favicons-webpack-plugin是对favicons模块的一次封装调用。

let faviconsWebpackPlugin = new FaviconsWebpackPlugin({
  logo : './public/static/src/logo.svg', // 目标图标路径
  cache : true,  // 启用缓存并可选择指定存储缓存数据的路径，禁用缓存可能会增加构建时间
  prefix : 'assets/logo/' ,   // 生成资产的前缀路径
  mode : 'webapp' ,  // 打包模式，默认为auto,可选webapp/light/auto 
  devMode : 'light', // 生产模式，默认为light,可选webapp/light 
})
plugins.push(faviconsWebpackPlugin)

配置过程十分简单。我们需要指定生成图标的源图片路径以及生成后图片的存放位置。此外，mode和devMode分别对应打包和生产两种模式。webapp和light则指代构建后图片是否完全满足生成需求。通常在生产环境下，为了加快调试页面的打开速度，会选用light模式，此时仅生成一个图标以快速构建。而webapp模式则会生成一系列图标。

回到正题，执行我们刚才编写的代码，进行打包并观察变化：

图片目录下已生成各种格式的图标。

index.html文件中也自动引用了这些图片。

再次运行项目，观察网站图标是否有变化。

回顾之前准备的三种格式图片，经测试均能良好展示。

然而，你可能会考虑，如果不需要这么多图标，仅希望生成网站的favicon.ico，该如何操作？

不必担心，前文提到该插件是对favicons的封装，因此favicons具备的功能，此处同样支持。

上述代码展示了favicons部分源码，其中列出了生成各类图标的开关选项。接下来，我们在前文基础上进行修改。

let faviconsWebpackPlugin = new FaviconsWebpackPlugin({
  // ...
  favicons: {
    appName: "",
    appDescription: "",
    developerName: "",
    developerURL: null,
    background: '#fff',
    theme_color: '#666',
    icons: {
      firefox:false,           // Firefox OS 图标
      windows:false,           // Windows 8 图标
      coast: false,            // Opera 图标
      android : false ,        // Android 主屏幕图标
      appleIcon : false,       // Apple 触摸图标
      appleStartup : false,    // Apple 启动图像
      favicons : true ,        // 网站图标
      yandex : false,          // Yandex 图标
    }
  }

除了设置图标种类的开关外，还可以配置其他参数，如应用名称、应用描述、主题色、背景色等。此处不再一一赘述，主要参考favicons中的配置项。

若仅需生成网站图标，可将其他选项关闭，然后重新打包构建。此时会发现，生成的图标仅保留favicon.ico。

兼容

由于favicons-webpack-plugin与html-webpack-plugin紧密关联，务必提前安装好特定版本，以避免出现兼容性问题。

• favicons-webpack-plugin 2.x 与 html-webpack-plugin 3.x 兼容

• favicons-webpack-plugin 3.x - 4.x 与 html-webpack-plugin 4.x 兼容

• favicons-webpack-plugin 5.x与 html-webpack-plugin 5.x 兼容

结语

类似favicons-webpack-plugin的插件众多，但其基本配置和操作大同小异。插件工具的好坏取决于使用者的运用方式。至少在项目搭建时，使用它可以自动生成一系列图标，省去诸多烦恼，图个方便省心。

到此这篇关于webpack如何自动生成网站图标的文章就介绍到这了,更多相关webpack自动生成网站图标内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！