The html-webpack-plugin creates an HTML file and inserts the webpack-packed static file into the HTML file when using webpack.

use

The installation

npm install html-webpack-plugin --save-dev
Copy the code

Use default Settings

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

module.exports = {
  entry: 'index.js'.output: {
    path: __dirname + '/dist'.filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}
Copy the code

By default, html-webpack-plugin will create an index. HTML file in the output.path directory and insert a script tag into this file with a SRC of output.filename.

The generated file is as follows:


      
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>
Copy the code

When multiple entry files are configured, the generated entries will be imported using script.

If there are any CSS resources in the output of webpack (for example, CSS extracted using the mini-CSS-extract-plugin), these resources will be included in the LINK tag in the HTML header.

More configuration

In a real project, you would need to customize some htML-webpack-plugin configurations, such as specifying build directories and files, using specified templates to build files, changing document.title information, and so on, by changing the default configuration.

The property name The field type The default value instructions
title String Webpack App Web pagedocument.titleIs available in the index.html file<%= htmlWebpackPlugin.options.title %>Sets the page title to the value set here.
filename String index.html htmlFile generation name that can be usedassets/index.htmlTo specify the generated file directory and filename,Important 1: The generated file path isouput.pathThe directory. Key 2: ‘assets/index.html’ and./assets/index.htmlThe effect is the same in both waysoutput.pathDirectory generationassets/index.html
template String empty generatefilenameFile template, if presentsrc/index.ejs, this file will be used as the template by default.Key: withfilenameWhen matching template paths will start from the project path
templateParameters Boolean|Object|Function empty Overrides the parameters used in the default template
inject Boolean|String true To developwebpackpackagedjs cssStatic resources are inserted intohtmlThe position of, istrueorbodyWhen, will putjsFiles inbodyThe bottom of, isheadWhen willjsThe script onheadElement.
favicon String empty For the generatedhtmlTo configure afavicon
mete Object {} For the generatedhtmlFile injection somemeteInformation, such as:{viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
base Object|String|false false Injection in the build filebaseTags, for examplebase: "https://example.com/path/page.html <base>The tag specifies the default address or destination for all links on the page
minify Boolean|Object ifmodeSet toproductionThe default istrueOtherwise set tofalse Set the compression of static resources
hash Boolean false If true, all containedjs 和 CSSThe file appends a uniquewebpackCompile hashes. This is useful for updating the cache file name each time
cache Boolean true Set up thejs cssFile cache: Specifies whether to use the cache when the file is not changed
showErrors Boolean true When an error occurs in the file, whether to display the error on the page
xhtml Boolean false When set totrueWill talk about<link>The label is set to matchxhtmlThe self-closing form of the specification

How attributes are used

webpack.config.js

{
  entry: 'index.js'.output: {
    path: __dirname + '/dist'.filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App'.filename: 'assets/admin.html'  // Generate assets/admin.html in the output.path directory}})]Copy the code

Generate multiplehtmlfile

To generate multiple HTML files, simply use HtmlWebpackPlugin webpack.config.js in plugins several times

{
  entry: 'index.js'.output: {
    path: __dirname + '/dist'.filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'My App'.filename: 'assets/admin.html'  // Generate assets/admin.html in the output.path directory}})]Copy the code

Use custom template generationhtmlfile

If the default HTML template does not meet your business needs, such as writing references to CSS ‘js’ resources in the snake generator file, the easiest way is to create a new template file and use the template attribute to specify the path to the template file. The htML-webpack-plugin will automatically inject packaged JS ‘CSS’ file resources into the template file.

webpack.config.js

plugins: [
  new HtmlWebpackPlugin({
    title: 'My App'.template: 'public/index.html'})]Copy the code

public/index.html


      
<html>
  <head>
    <meta charset="utf-8"/>
    <title><% = htmlWebpackPlugin.options.title% ></title>
    <link src="xxx/xxx.css">
  </head>
  <body>
  </body>
</html>
Copy the code

Use a custom template receiving HtmlWebpackPlugin defined in the title you need to use the < % = HtmlWebpackPlugin. Options. The title % >

Minification

If the Minify option is set to True (the default when Webpack mode is Production), the generated HTML is compressed using htMl-minifier and the following options:

{
  collapseWhitespace: true.removeComments: true.removeRedundantAttributes: true.removeScriptTypeAttributes: true.removeStyleLinkTypeAttributes: true.useShortDoctype: true
}
Copy the code

To use the custom HTML compressor option, pass an object to configure it. This object will not be merged with the default value above.

To disable minification during production mode, set the minify option to false.