Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use html-webpack-plugin". Friends who are interested might as well take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use html-webpack-plugin.

All the webpack children's shoes that html-webpack-plugin may have used have used this plugin, even if they haven't used it. When we learn webpack, we may often see a piece of code like this.

/ / 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 at the terminal,

Webpack

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

All of this is thanks to html-webpack-plugin. It will automatically generate a html file for you and reference the relevant assets file (such as css, js).

When I first came into contact with the front-end automated build in June, when I learned about webpack and react, I simply used this plug-in, but only a few common options. Take a look at the official documentation today to see all its uses.

Title

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

Filename

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

Template

Generate a specific html file according to 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 is important to note that when using custom template files, you need to install the corresponding loader in advance, otherwise webpack will not parse correctly. 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'})]

Eventually, a yourfile.html and bundle.js file will be generated in the build folder. Now let's go back to the title property we set earlier.

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

Then whether filename will also be overwritten, but it is not, it will use the specified filename as the file name.

Inject

Injection option. There are four option values true, body, head, false.

True: default. The script tag is located at the bottom of the body of the html file.

Body: same as true

The head:script tag is located within the head tag

False: do not insert the generated js file, just generate a html file

Favicon: generate a favicon for the generated html file. The property value is the pathname where the favicon file is located.

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

The generated html tag will contain such a link tag

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

Minify

The function of minify is to compress the html file, and the attribute value of minify is a compression option or false. The default value is false, and the generated html files are not compressed. Take a look at this compression option.

Html-minifier is integrated into html-webpack-plugin, and this compression option is exactly the same as html-minify 's compression option.

Look at a simple example.

/ / webpack.config.js...plugins: [new HtmlWebpackPlugin ({... Minify: {removeAttributeQuotes: true / / remove quotation marks}})] test minifytest minify

Hash

The hash option gives the generated js file a unique hash value, which is the hash value of the webpack compilation. The default is false. Also look at an example.

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

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

The string of hash values followed by the bundle.js file is the corresponding hash value for this 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

The role of showErrors is that if there is an error in webpack compilation, webpack wraps the error message in a pre tag, and the default value of the attribute is true, which displays the error message.

Chunks

The chunks option is mainly for multiple entry (entry) files. When you have multiple entry files, multiple compiled js files will be generated. Then the chunks option can decide whether to use all of these generated js files.

By default, chunks references all js files in the generated html files, but you can also specify which specific files to import.

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 executing the webpack command, you will see that only index.js and index2.js are referenced in the generated index.html file

...

If the chunks option is not specified, it will all be referenced by default.

ExcludeChunks

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

.. excludeChunks: ['index1.js']

ChunksSortMode

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

Needless to say, dependency' is sorted according to the dependencies of different files.

The default value of auto', the built-in sorting method of the plug-in, the specific order here I am not quite clear.

'none' is out of order? I'm not sure.

{function} provide a function? But what are the parameters of the function? I'm not sure.

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

Xhtml

A Boolean value that defaults to false. If true, the file is referenced in xhtml-compatible mode.

At this point, I believe you have a deeper understanding of "how to use html-webpack-plugin". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.