Full explanation of html-webpack-plugin usage,

Full explanation of html-webpack-plugin usage,

Html-webpack-plugin: this plug-in is used for webpack children's shoes that may have been used, even if it has never been used. When learning webpack, we may often see such a piece of code.

// webpack.config.jsmodule.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 on the terminal

Webpack

You can see that an index.html file and a bundle. js file are generated in your build folder, and the bundle. js file generated by webpack is automatically referenced in the index.html file.

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

I used this plug-in for the first time in June when I came into contact with automated front-end building. When I learned about webpack and react, I used this plug-in. However, I only used a few common options. Today I will go with the official documentation, let's take a look at all its usage.

Title

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

Filename

There is nothing to say, generate the file name of the html file. The default value is index.html.

Template

Generate a specific html file based on your specified template file. The template type can be any template you like, such as html, jade, ejs, and Harvard. However, when using a custom template file, you must install the corresponding loader in advance. Otherwise, the webpack cannot be correctly parsed. Take jade as an example.

npm install jade-loader --save-dev

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

A yourfile.html and bundle. js file will be generated in the build folder. Now let's look back at the title attribute.

If you specify both the template option and the title option, which one does 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.

Then, will filename be overwritten? In fact, it is not. It uses the specified filename as the file name.

Inject

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

1. True: the default value. The script tag is located at the bottom of the html file body.
2. Body: Same as true
3. Head: the script label is in the head label.
4. False: do not insert the generated js file, but simply generate an html file.
5. Favicon: generate A favicon for the generated html file. The property value is the path name of the favicon file.

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

The generated html Tag contains such a link tag.

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

Like title and filename, if favicon is specified in the template file, this attribute is ignored.

Minify

Minify is used to compress html files. The value of minify is a compression option or false. The default value is false. The generated html file is not compressed. Let's take a look at this compression option.

Html-webpack-plugin is integrated with html-minifier. This compression option is exactly the same as that of html-minify,
Let's look at a simple example.

// Webpack. config. js... plugins: [new HtmlWebpackPlugin ({... minify: {removeAttributeQuotes: true // remove attribute quotation marks})]

<! -- Original html clip --> <div id = "example" class = "example"> test minify </div>

<! -- Generate an html clip --> <div id = example class = example> test minify </div>

Hash

The hash option is used to create a unique hash value for the generated js file. The hash value is the hash value compiled by this webpack. The default value is false. Let's look at an example.

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

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

After running the webpack command, you will see the js file referenced in the script tag of the generated html file. Is it a little changed.

The hash value followed by the bundle. js file is the hash value corresponding to the current webpack compilation.

$ webpackHash: 22b9692e22e7be37b57eVersion: webpack 1.13.2

Cache

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

ShowErrors

ShowErrors is used to wrap the error message in a pre Tag if a webpack compilation error occurs. The default value of the attribute is true, indicating that the error message is displayed.

Chunks

The chunks option is mainly used for multi-entry files. When you have multiple entry files, multiple compiled js files are generated accordingly. Then, the chunks option determines whether all these generated js files are used.

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

Let's look at a small example.

// webpack.config.jsentry: {  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 running 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, all references will be made by default.

ExcludeChunks

After understanding chunks, The excludeChunks option is easy to understand. It is opposite to chunks and some js files are excluded. For example, the above example is equivalent to the following line.

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

ChunksSortMode

This option determines the reference sequence of the script tag. By default, there are four options: 'none', 'auto', 'dependency ', and' {function }'.

1. 'Dependency 'needless to say, is sorted by the dependencies of different files.
2. The default value of 'auto' is the built-in sorting method of the plug-in. I am not sure about the specific sequence here...
3. 'None' unordered? Not clear...
4. {Function} provides a function? But what are the function parameters? Not clear...

If you have used this option or know its specific meaning, please let me know...

Xhtml

A boolean value. The default value is false. If it is true, the file is referenced in xhtml-compatible mode.

Summary

The above section summarizes the options for new HtmlWebpackPlugin (). After understanding the meaning of all options, you can use them more flexibly during project construction. I hope it will be helpful for everyone's learning, and I hope you can support the house of helping customers more.