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

This article mainly explains "html-webpack-plugin case Analysis". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "html-webpack-plugin case Analysis"!

Recently, the html-webapck-plugin plug-in was first used in the react project, using the two main functions of the plug-in:

Dynamically add hash after each compile for external resources introduced in html files, such as script and link, to prevent the problem of referencing cached external files

You can generate and create html entry files, for example, a single page can generate a html file entry, and configure N html-webpack-plugin to generate N page entries.

With this plug-in, problems similar to the above in the project can be easily solved.

I use html-webpack-plugin in my project, because I am not familiar with the plug-in, and I encounter this or that problem in the development process, so let's talk about this plug-in.

Html-webpack-plugin

The basic function of a plug-in is to generate html files. The principle is simple:

Insert the relevant entry chunk and the css style extracted from the `entry` configuration in webpack into the content base specified by the `template` or `templateContent` configuration item provided by the plug-in to generate a html file by inserting the style `link` into the `head` element and `script` into `head` or `body`.

You can instantiate the plug-in without configuring any parameters, such as the following:

Var HtmlWebpackPlugin = require ('html-webpack-plugin')

Webpackconfig = {

...

Plugins: [

New HtmlWebpackPlugin ()

]

}

Without configuring the html-webpack-plugin plug-in with any option, he will by default insert all entry thunk and extract-text-webpack-plugin extracted css styles in webpack into the location specified in the file. For example, the html file generated above is as follows:

Webpack App

Of course, you can use specific configuration items to customize some special requirements, so what are the configuration items for plug-ins?

Html-webpack-plugin configuration item

There are many configuration items provided by the plug-in. The specific configuration items can be seen from the source code as follows:

This.options = _ .extend ({

Template: path.join (_ _ dirname, 'default_index.ejs')

Filename: 'index.html'

Hash: false

Inject: true

Compile: true

Favicon: false

Minify: false

Cache: true

ShowErrors: true

Chunks: 'all'

ExcludeChunks: []

Title: 'Webpack App'

Xhtml: false

}, options)

Title: the title of the generated html document. Configure this item, which does not replace the contents of the title element in the specified template file, unless the template engine syntax is used in the html template file to obtain the configuration item value, as shown in the ejs template syntax:

{% = o.htmlWebpackPlugin.options.title%}

Filename: the file name of the output file, which is index.html by default and is not configured. In addition, you can specify a directory location for the output file (for example, 'html/index.html').

* * two additional points about filename: * *

1. The html file directory configured by filename is relative to the webpackConfig.output.path path, not to the current project directory structure.

2. Specify that the link and script paths in the contents of the generated html file are relative to those in the build directory. Please write the relative path in the build directory when writing the path.

Template: the location of the local template file, and loaders (such as handlebars, ejs, undersore, html, etc.) are supported, such as handlebarsaccounsrc _ index.hbs

* * A few additional points about template: * *

1, template configuration item in the html file using file-loader, its specified location can not be found, resulting in the content of the generated html file is not the desired content.

2. If the template file specified for template does not specify any loader, ejs-loader is used by default. For example, template:'. / index.html', uses ejs-loader if no loader is specified for .html

TemplateContent: string | function, which can specify the content of the template and cannot coexist with template. When the configuration value is function, either the html string can be returned directly or the html string can be returned by asynchronous call.

Inject: all static resources are injected into template or templateContent, and different configuration values are injected at different locations.

1, true or body: all JavaScript resources are inserted at the bottom of the body element

2. Head: all JavaScript resources are inserted into the head element

3. False: all static resources css and JavaScript will not be injected into the template file

Favicon: add a specific favicon path to the output html document. This is the same as the title configuration item, and the path value needs to be dynamically obtained in the template.

Hash:true | false, whether to add a unique hash value generated by each compilation of webpack to all injected static resources. The form of adding hash is as follows:

Html

Chunks: some chunk that can be inserted into the template. Not configuring this default will inject all the thunk in the entry into the template. When configuring multiple pages, the thunk injected into each page should be different, and different thunk should be injected into different pages through this configuration.

ExcludeChunks: this is the opposite of the chunks configuration item and is used to configure thunk that is not allowed to be injected.

ChunksSortMode: none | auto | function, the default auto; allows the specified thunk to be sorted before being inserted into the html document.

> function value can specify specific sorting rules; auto sorts based on thunk's id; none does not sort.

Xhtml: true | fasle. Default is whether false; renders link with self-closing label and true with self-closing label.

Cache: true | fasle. If the default true; is true, the emit file will be created after the corresponding thunk file is modified.

ShowErrors: true | false, whether the default true; outputs error messages to the html page. This is very useful, there is an error message in the process of generating the html file, and you can see the error-related information to the page for debugging.

Minify: {....} | false; passes the html-minifier option to minify output. False does not use html compression. Click html-minifier for specific configuration parameters of minify.

The following is an example of configuring these properties:

New HtmlWebpackPlugin ({

Title:'rd platform'

Template: 'entries/index.html', / / source template file

Filename:'. / index.html', / / output file [Note: the root path here is module.exports.output.path]

ShowErrors: true

Inject: 'body'

Chunks: ["common", 'index']

})

Configure multiple html pages

An instance of html-webpack-plugin generates a html file. If multiple page entries are needed in a single-page application, or when multiple html are configured in a multi-page application, then the plug-in needs to be instantiated multiple times.

That is, you need to configure several instances of the plug-in in the plugins array of webpack with a few pages:

...

Plugins: [

New HtmlWebpackPlugin ({

Template: 'src/html/index.html'

ExcludeChunks: ['list',' detail']

})

New HtmlWebpackPlugin ({

Filename: 'list.html'

Template: 'src/html/list.html'

Thunks: ['common',' list']

})

New HtmlWebpackPlugin ({

Filename: 'detail.html'

Template: 'src/html/detail.html'

Thunks: ['common',' detail']

})

]

...

For example, in the above application, three entry pages are configured: index.html, list.html, detail.html;, and the thunk injected into each page is different; similar to if the application is multi-page, you need to configure one for each page.

Configure custom templates

The default html file generated by html-webpack-plugin without parameters only inserts thunk and css styles into the document, which may not meet our needs.

In addition, as mentioned above, three different html template files are specified for the three pages; in a project, it is possible to share one template file for all pages, because the html-webpack-plugin plug-in supports different template loader, so it is possible to share a template file with a template engine.

Therefore, configuring custom templates comes in handy. The specific method is realized with the help of template engine, such as the ejs template engine supported by default when the plug-in is not configured with loader. Here is an example of ejs template engine.

For example, there are two entry html pages in the project, which can share a template file and use the syntax of the ejs template to dynamically insert the thunk and css styles of their respective pages. The code can be as follows:

You may be confused about the contextual htmlWebpackPlugin data in your code. What is this? In fact, this is the data generated by the html-webpack-plugin plug-in in the process of generating the html file, which is available to the html template file.

Custom template context data

Html-webpack-plugin in the process of generating html files, the plug-in will generate a specific data available to the current template according to the configuration, and the template syntax can dynamically generate the contents of the html file based on these data.

So, what is the special data format generated by the plug-in, and what kind of data is generated? The answer is given from the source code or its official website. You can see from the source code that the specific data that can be accessed by the template engine is as follows:

Var templateParams = {

Compilation: compilation

Webpack: compilation.getStats () .toJson ()

WebpackConfig: compilation.options

HtmlWebpackPlugin:

Files: assets

Options: self.options

}

}

It can be seen that there are four main target data. Among them, compilation provides a compiled object that all webpack plug-ins can access, which is not introduced here, but you can check the information on your own. The remaining three object data are described below.

Webpack

The stats object of webpack; note one thing:

This accessible stats object is the stats object corresponding to the generation of the htm file, not the entire stats object corresponding to the completion of the webpack run.

WebpackConfig

Configuration items for webpack; this property allows you to get relevant configuration items for webpack, such as getting publicPath configuration through webpackConfig.output.publicPath. Of course, you can also get other configuration content.

HtmlWebpackPlugin

Data corresponding to the html-webpack-plugin plug-in. It consists of two parts:

HtmlWebpackPlugin.files: the chunk configured by the html-webpack-plugin plug-in and the css style of the extraction. This files value is actually the value represented by the assetsByChunkName attribute of the stats object of webpack, which is the value mapped by webpackConfig.output.filename corresponding to the chunk block configured by the plug-in. For example, the format of the data generated in the example of each attribute configuration item of the above configuration plug-in is as follows:

"htmlWebpackPlugin": {

"files": {

"css": ["inex.css"]

"js": ["common.js", "index.js"]

"chunks": {

"common": {

"entry": "common.js"

"css": ["index.css"]

}

"index": {

"entry": "index.js"

"css": ["index.css"]

}

}

}

}

In this way, you can use the following template engine to dynamically output script scripts

HtmlWebpackPlugin.options: the configuration item passed to the plug-in, as described in the plug-in configuration item section above.

Plug-in event

I don't know if you've noticed, but the html-webpack-plugin plug-in has some problems inserting static resources:

When inserting js resources, you can only insert head or body elements, some cannot be inserted into head, and some can be inserted into body.

File inlining in html is not supported *, for example, somewhere in the file is used to inline external scripts

To this end, this question is specifically asked for plug-in authors; plug-in events are provided for this plug-in author to allow other plug-ins to change the contents of the html file. The specific events are as follows:

Async (Asynchronous event):

* html-webpack-plugin-before-html-generation

* html-webpack-plugin-before-html-processing

* html-webpack-plugin-alter-asset-tags

* html-webpack-plugin-after-html-processing

* html-webpack-plugin-after-emit

Sync (synchronization event):

* html-webpack-plugin-alter-chunks

These events are provided to other plug-ins to change the content of the html. Therefore, a webpack plug-in is required to use these events. For example, the MyPlugin plug-in defined below.

Function MyPlugin (options) {

/ / Configure your plugin with options...

}

MyPlugin.prototype.apply = function (compiler) {

/ /...

Compiler.plugin ('compilation', function (compilation) {

Console.log ('The compiler is starting a new compilation...')

Compilation.plugin ('html-webpack-plugin-before-html-processing', function (htmlPluginData, callback) {

HtmlPluginData.html + = 'The magic footer'

Callback (null, htmlPluginData)

});

});

}

Module.exports = MyPlugin

Then, configure the Myplugin information in the webpack.config.js file:

Plugins: [

New MyPlugin ({options:''})

]

At this point, I believe you have a deeper understanding of "html-webpack-plugin case analysis", you might as well come to the actual operation of it! 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.