What are the usages of html-webpack-plugin?

This article mainly introduces the detailed explanation of the usage of html-webpack-plugin. Now I will share it with you and give you a reference.

html-webpack-plugin Everyone who has used webpack may have used this plugin, and even if they have never used it, they may have heard of it. When we are learning webpack, we may often see a piece of code like this.

// webpack.config.js
module.exports = {
  entry: path.resolve(__dirname, './app/index.js'),
  output:{
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  }
  ...
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

After entering the webpack command in the terminal

webpack

you will magically see an index.html file and a bundle generated in your build folder. js file, and the bundle.js file generated by webpack is automatically referenced in the index.html file.

All of these are the result of html-webpack-plugin. It will automatically generate an html file for you and reference related assets files (such as css, js).

I first came into contact with front-end automated construction in June. When I was learning webpack and react, I briefly used this plug-in, but I only used a few common options. Today I will follow the official documentation. , to see all its uses.

title

As the name suggests, set the title of the generated html file.

filename

Nothing to say, generate the file name of the html file. The default is index.html.

template

Generate a specific html file based on your own specified template file. The template type here can be any template you like, it can be html, jade, ejs, hbs, etc., but it should be noted that when using a custom template file, you need to install the corresponding loader in advance, otherwise webpack will not work correctly parse. Take jade for example.

npm install jade-loader --save-dev

// webpack.config.js
...
loaders: {
  ...
  {
    test: /\.jade$/,
    loader: 'jade'
  }
}
plugins: [
  new HtmlWebpackPlugin({
    ...
    jade: 'path/to/yourfile.jade'
  })
]

Finally, a yourfile.html and bundle.js files will be generated in the build folder. Now let's go back and look at the title attribute we used earlier.

If you specify both the template option and the title option, which one will webpack choose? In fact, the title of the template file you specified will be selected at this time, even if the title is not set in your template file.

What about filename? Will it also be overwritten? In fact, no, the specified filename will be used as the file name.

inject

Injection options. There are four options: true, body, head, false.

1. true: default value, the script tag is located at the bottom of the body of the html file

2. body: Same as true

3. head: The script tag is located in the head tag

4. false: Do not insert the generated js file, just generate one html file

5. favicon: Generate a favicon for the generated html file. The attribute value is the pathname of the favicon file.

// webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    favicon: 'path/to/yourfile.ico'
  }) 
]

The generated html tag will contain such a link tag

<link rel="shortcut icon" href="example.ico" rel="external nofollow" >

Same as title and filename, if favicon is specified in the template file, this attribute will be ignored.

minify

minify is used to compress html files. The attribute value of minify is a compression option or false. The default value is false, and the generated html file will not be compressed. Let’s take a look at this compression option.

html-webpack-plugin integrates html-minifier internally. This compression option is exactly the same as that of html-minify.
Look at a simple example.

// webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    minify: {
      removeAttributeQuotes: true // 移除属性的引号
    }
  })
]

<!-- 原html片段 -->
<p id="example" class="example">test minify</p>

<!-- 生成的html片段 -->
<p id=example class=example>test minify</p>

hash

The function of the hash option is to give the generated js file a unique hash value, which is the hash value of the webpack compilation. The default value is false . Let’s look at an example as well.

// webpack.config.js
plugins: [
  new HtmlWebpackPlugin({
    ...
    hash: true
  })
]

<script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>

After executing the webpack command, you will see that the js file referenced in the script tag of your generated html file has changed a bit.

The string of hash values ​​following the bundle.js file is the hash value corresponding to this webpack compilation.

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2

cache

The default value is true. Indicates that a new file is generated only when the content changes.

showErrors

The function of showErrors is that if an error occurs during webpack compilation, webpack will wrap the error information in a pre tag. The default value of the attribute is true. It just displays an error message.

chunks

The chunks option is mainly used for multi-entry files. When you have multiple entry files, multiple compiled js files will be generated accordingly. Then the chunks option can determine whether to use these generated js files.

chunks will reference all js files in the generated html file by default. Of course, you can also specify which specific files to import.

Look at a small example.

// webpack.config.js
entry: {
  index: path.resolve(__dirname, './src/index.js'),
  index1: path.resolve(__dirname, './src/index1.js'),
  index2: path.resolve(__dirname, './src/index2.js')
}
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    chunks: ['index','index2']
  })
]

After executing the webpack command, you will see that the generated index.html file only references index.js and index2.js

...
<script type=text/javascript src=index.js></script>
<script type=text/javascript src=index2.js></script>

If the chunks option is not specified, the default will be Quote all.

excludeChunks

After understanding chunks, the excludeChunks option is easy to understand. It is the opposite of chunks and excludes certain js files. For example, the above example is actually equivalent to the following line

...
excludeChunks: ['index1.js']

chunksSortMode

This option determines the reference order of script tags. There are four options by default, 'none', 'auto', 'dependency', '{function}'.

1. 'dependency' Needless to say, sort according to the dependencies of different files.

2. 'auto' Default value, the plug-in's built-in sorting method, I don't know the specific order here...

3. 'none 'Disorder? Not sure...

4. #{function} Provides a function? But what are the parameters of the function? Not sure...

If there are students who have used this option or know its specific meaning, please let me know. . .

xhtml

A Boolean value, the default value is false, if true, the file is referenced in xhtml-compatible mode.

Summary

The above summarizes the options passed into new HtmlWebpackPlugin(). After understanding the meaning of all options, you can use them more flexibly when building the project. I hope it will be helpful to everyone's learning, and I also hope that everyone will support Script Home.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Instructions for using the button component in the WeChat mini program

How to use the progress component in the WeChat mini program

About how to get json data from the server in the $.ajax() method

How to load external web pages or server data using the MUI framework

Detailed explanation of Karma Mocha in Vue unit testing

PHP closures and anonymous functions (detailed tutorial)

How to use the three-level linkage selector in WeChat mini program

The above is the detailed content of What are the usages of html-webpack-plugin?. For more information, please follow other related articles on the PHP Chinese website!