Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.webpack.js.org/llms.txt

Use this file to discover all available pages before exploring further.

The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation.
This is an external plugin maintained by the community. Install it separately with npm install --save-dev html-webpack-plugin.

​
Installation

npm install --save-dev html-webpack-plugin

​
Basic Usage

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin()
  ]
};
This will generate an HTML file that includes all your webpack bundles.

​
Configuration

​
title
string
The title to use for the generated HTML document
​
filename
string
default:"index.html"
The file to write the HTML to. Defaults to index.html
​
template
string
Webpack require path to a template
​
inject
boolean | string
default:"true"
Controls asset injection. Options: true, 'head', 'body', false
​
minify
boolean | object
default:"true"
Controls HTML minification in production mode

​
Examples

​
Custom Template

new HtmlWebpackPlugin({
  title: 'My App',
  template: 'src/index.html',
  filename: 'index.html'
})

​
Multiple Pages

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      chunks: ['main']
    }),
    new HtmlWebpackPlugin({
      filename: 'admin.html',
      chunks: ['admin']
    })
  ]
};

​
Template Example

Create a template file src/index.html: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

​
Further Reading

For complete documentation, see the HtmlWebpackPlugin GitHub repository.