Shulou(Shulou.com)06/01 Report--

This article mainly introduces how webpack automatically generates website icons, the article introduces in great detail, has a certain reference value, interested friends must read it!

Introduction

When we are building our own project, sometimes the supervisor gives you a logo picture so that you can figure out how to turn it into a website icon. Sometimes the project requires not only multiple sizes of favicon.ico, but also various sizes of Android and ios private attributes such as apple-touch-icon. In fact, there are some online tools or local software for you to use, but it's just a little irritable. Have you ever considered completely ignoring this task and allowing the project to be built on its own after being packaged so that you don't have to worry about it anymore? In this issue, we will introduce html-webpack-plugin, a plug-in that automatically processes images into website icons. He can automatically help us to generate all kinds of formats and sizes automatically, which is so convenient and easy to worry about.

Prepare for

First prepare the original image to generate the icon, which can be jpg,png or svg. Let's have one for the demonstration.

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

/ / webpack.config.jsconst 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}

After that, we're going to make trouble in the plugins array.

Use

Let's install it first.

# NPMnpm I-D favicons favicons-webpack-plugin# YARNyarn add-D favicons favicons-webpack-plugin

We are going to install two things, one is favicons-webpack-plugin, which is the plug-in body, and the other is favicons, which is the Node.js module for generating website icons and related files. In fact, favicons-webpack-plugin itself is a loan to favicons.

Let faviconsWebpackPlugin = new FaviconsWebpackPlugin ({logo:'. / public/static/src/logo.svg', / / Target icon path cache: true, / / enable caching and optionally specify the path to store cached data. Disabling caching may increase the build time prefix: 'assets/logo/', / / generate the prefix path of the asset mode:' webapp', / / packaging mode Default is auto, optional webapp/light/auto devMode: 'light', / / production mode, default is light, optional webapp/light}) plugins.push (faviconsWebpackPlugin)

Very simple, we first need to configure the path of the image to be generated, as well as the location after the image is generated, as for mode and devMode are packaging and production modes respectively. Webapp and light, as the name implies, is whether the built image fully meets the generation needs. In general, light is selected in the production environment to open the debugging page more quickly, so it will generate an icon to build it as quickly as possible. Webapp generates a bunch of icons.

To get back to the point, what will happen to Kangkang in the code we just wrote?

Various icons have been generated under the picture directory.

These pictures are also automatically referenced in index.html.

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

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

However, you may think, I can't use so many icons, I just want to generate the favicon.ico of the website, what should I do?

Don't worry, I just said that this plug-in is a loan to favicons, so some of favicons can also be available here.

The above is part of the source code of favicons, this part says what icon can be generated on the switch, and then, let's change it on the basis of what we just did.

Let faviconsWebpackPlugin = new FaviconsWebpackPlugin ({/ /... Favicons: {appName: ", appDescription:", developerName: ", developerURL: null, background:'# fff', theme_color:'# 66631, icons: {firefox:false, / / Firefox OS icon windows:false, / / Windows 8 icon coast: false, / / Opera icon android: false / / Android main screen icon appleIcon: false, / / Apple touch icon appleStartup: false, / / Apple launch image favicons: true, / / website icon yandex: false, / / Yandex icon}}

In addition to setting the icon type switch, you can also set some other things, such as app name, app description, body color, background color and so on. Here, we will not repeat them one by one, mainly looking at the configuration in favicons.

Here, we just want the website icon, so we can close the rest, and then package and build it, and we will find that the icon is only favicons.

Compatible

Because favicons-webpack-plugin is associated with 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 plug-ins similar to favicons-webpack-plugin, but whether the basic configuration and operation are poor or not. Plug-in tool is like this, good or bad depends on how you use it, at least if we use it to build the project, we can automatically generate a series of icons, save some trouble, map a convenient and worry-free.

The above is all the contents of the article "how to automatically generate website icons by webpack". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.