Today we introduce one of the most commonly used plug-ins for Webpack: the HTML WebPack Plugin.

It’s not an exaggeration to say that it’s an essential plug-in for developing front-end projects with WebPack, because it automatically helps you embed webPack-generated files (such as JS files, CSS files) into HTML files.

This is especially useful when generating files with hash strings.

Add the HtmlWebpackPlugin to the WebPack configuration file and then add the HtmlWebpackPlugin instance object to the plugins array with new HtmlWebpackPlugin().

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js'.output: {
    filename: 'app.[contenthash:8].js',},mode: 'production'.plugins: [
    new HtmlWebpackPlugin()
  ],
}
Copy the code

After we execute the NPX webpack command, webpack generates an additional dist/index.html file for us. After formatting the HTML file, the resulting content is:

<! doctypehtml>
<html>
<head>
  <meta charset="utf-8">
  <title>Webpack App</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script defer="defer" src="app.c8b961ec13a790ae7d15.js"></script>
</head>
<body></body>
</html>
Copy the code

You can see that the packaged app.js file is automatically embedded in the last child under the head element.

Here a content hash string is added to the end of the package file name, meaning that the value of the hash string is different every time the content of the item changes.

Imagine how tired you would be if you had to change the JS file name every time you managed your HTML file. Fortunately, the HtmlWebpackPlugin helps.

Of course, this is only the default use of the HtmlWebpackPlugin, so we can do more specific customization.

Some commonly used properties

We need to pass in a configuration object to customize the template rendering.

The configuration of HtmlWebpackPlugin is very rich, but there are several commonly used.

plugins: [
  new HtmlWebpackPlugin({
    title: 'Front-end watermelon guy's blog'.favicon: 'static/favicon.ico',})],Copy the code
  • Titile: Set the page title
  • Filename: generates an HTML filename. The default value isindex/html;
  • Template: Use your own template. Fill in the path of this template. After using this template, some configuration items are invalid, such as title.
  • Favicon: Specifies the site icon path. In addition to filling the HTML with Favicon content, it will also copy the file into a package folder, which is very useful;
  • Minify: Whether to compress HTML files. If the mode of webpack is not setproduction, compressing the HTML, removing extra white space and comments and so on.

Use custom HTML templates

In real development, an index. HTML is usually created and provided to the HtmlWebpackPlugin plugin as a template.

That way, configuration like title and more granular content can be written directly to HTML. It is much more intuitive to edit directly in HTML than to configure.

We create an index. HTML template in the root directory:

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Front end watermelon</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body></body>
</html>
Copy the code

This allows you to add titles directly to the HTML template, as well as some third-party libraries in the form of CDN.

Change the webpack.config.js configuration to:

plugins: [
  new HtmlWebpackPlugin({
    template: 'index.html'}),].Copy the code

The generated HTML is:

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Front end watermelon</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script defer src="app.d02c9155f73c92f51bf5.js"></script>
</head>
<body></body>
</html>
Copy the code

A copy-webpack-plugin is used to copy files or folders into the package directory. I will write a separate article about this plugin, which I won’t expand on here.

Custom HTML injection variables

HtmlWebpackPlugin supports variable injection using loDash.template ().

We changed the template HTML to look like this:

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <%= htmlWebpackPlugin.options.saySomething %>
</body>
</html>
Copy the code

Change the configuration to:

plugins: [
  new HtmlWebpackPlugin({
    template: 'index.html'.title: 'Front-end watermelon guy's blog'.// The following is a custom attribute
    saySomething: 'Stay hungry, stay foolish'}),].Copy the code

Will be introduced to give HtmlWebpackPlugin configuration properties will be HtmlWebpackPlugin. Under the options object properties, embedded in HTML templates.

So the generated result here is:

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Front-end watermelon brother's blog</title>
<script defer src="app.d02c9155f73c92f51bf5.js"></script></head>
<body>
  Stay hungry, stay foolish
</body>
</html>
Copy the code

Because loDash.template is used for rich rendering, in addition to embedding variable values, it also supports judgment conditions, loops, and other features, which basically satisfy most of our scenarios.

Here is a template for index.html that uses quite a few features: github.com/jaketrent/h…

At the end

The HTML Webpack Plugin is a widely-used Webpack plug-in that automatically emashes our packaged files into a template HTML.

In real development, we usually use our own HTML templates.

I am front-end watermelon brother, keen to share front-end knowledge, welcome to follow me.