“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

introduce

When we build our own projects, sometimes the supervisor gives you a logo picture and asks you to change it into a website icon by yourself. Sometimes the project requirements include not only favicon.ico of various sizes, but also ICONS of various sizes for android and ios private attributes such as Apple-touch-icon. There are some online tools or native software that you can use, but you are a little frustrated. Have you considered ignoring this task completely and letting the project build be packaged and generated yourself, so you don’t have to worry about it anymore? This is the htML-webpack-plugin that automatically transforms images into web ICONS. He can automatically help us to need a variety of formats and sizes automatically generated, is so convenient and worry free.

To prepare

Prepare the original image of the icon to be generated. It can be JPG, PNG, or SVG. Let’s have one just for demonstration.

Then write an infrastructure in webpack.config.js as follows:

// 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
}
Copy the code

After that, we need to do something in the plugins array.

use

Let’s set it up first

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

We will install two things: favicons-webpack-plugin, which is the body of the plugin, and Favicons, which is the Node.js module for generating the site ICONS and their associated files. The Favicons -webpack-plugin is itself a borrowing of Favicons.

let faviconsWebpackPlugin = new FaviconsWebpackPlugin({
  logo : './public/static/src/logo.svg'.// Target icon path
  cache : true.// Enable caching and optionally specify a path to store cached data. Disabling caching may increase build time
  prefix : 'assets/logo/' ,   // Generate a prefix path for the asset
  mode : 'webapp' ,  // The packaging mode is auto by default. Webapp, light, and Auto are optional
  devMode : 'light'.// Production mode, default is light, optional webApp /light
})
plugins.push(faviconsWebpackPlugin)
Copy the code

It is very simple, we first need to configure the path of the picture to be generated, and the position of the generated picture. Mode and devMode are the two modes of packaging and production respectively. As the name implies, WebApp and Light are to determine whether the image after construction can fully meet the generation needs. Generally, light will be used in production environment in order to open the debugging page faster, so that it will generate an icon and build at the fastest speed. Webapp generates a bunch of ICONS.

To get back to the code we just wrote, let’s see what happens when we execute package kangkang:

ICONS in various formats have been generated in the images directory.

These images are also automatically referenced in index.html.

Let’s run it again and see if there is any change in the icon of Kangkang website.

Do you still remember that I made pictures in three formats just now? I just tested them all and they can be well displayed.

But, you may be thinking, I don’t have enough ICONS, I just want to generate favicon.ico for the site, what about that?

Don’t worry, I just said that this plugin is a borrowing of Favicons, so you can have favicons here as well.

Here is a part of the source code for Favicons, which tells us what switches can generate ICONS. Now, let’s change it.

let faviconsWebpackPlugin = new FaviconsWebpackPlugin({
  // ...
  favicons: {
    appName: "".appDescription: "".developerName: "".developerURL: null.background: '#fff'.theme_color: '# 666'.icons: {
      firefox:false.// Firefox OS icon
      windows:false.// Windows 8 icon
      coast: false./ / Opera icon
      android : false ,        // Android home screen icon
      appleIcon : false.// Apple touch icon
      appleStartup : false.// Apple launches the image
      favicons : true ,        // Site icon
      yandex : false./ / another dual icon}}Copy the code

In addition to having a switch to set ICONS, you can also set other ICONS such as the name of the app, the description of the app, the main colour, the background colour and so on, which I will not go into here, but mainly the configuration of favicons.

In this case, we only want the website icon, so we can close the others and then go to pack the build, and we will find that the only ICONS left are Favicons.

Compatible with

Since the Favicons -webpack-plugin is related to the HTMl-webpack-plugin, some specific versions must be installed in advance to avoid compatibility problems.

  • Favicons -webpack-plugin 2.x is compatible with htMl-webpack-plugin 3.x

  • Favicons -webpack-plugin 3.x – 4.x is compatible with htMl-webpack-plugin 4.x

  • Favicons -webpack-plugin 5.x is compatible with htMl-webpack-plugin 5.x

conclusion

There are many other plug-ins like the Favicons -webpack-plugin, but the basic configuration and operation are quite different. Plug-in tools are like this, good or bad depending on how you use it, at least if we use it when building a project, it can automatically generate a series of ICONS, save some trouble, a convenient and easy to save worry. If you feel useful, you can like it