HtmlWebpackPlugin

html-webpack-plugin is a plugin for the webpack module bundler that automates the creation of HTML files to serve webpack bundles. Commonly referred to by its package name html-webpack-plugin, it generates an HTML document and automatically injects script and link tags for emitted assets, ensuring the correct hashed filenames are referenced in the final HTML.

The plugin supports using a custom template, as well as options for output filename, injection point, and asset minification. It can create multiple HTML files by instantiating the plugin more than once, with each instance producing its own HTML file and injecting the assets relevant to its configured chunks. This makes it suitable for multi-page applications where different pages reference different bundles.

Key features include automatic injection of bundle references, support for template parameters, and control over minification, favicon, and meta tags. It is designed to work well with code-splitting and dynamic imports, ensuring that the generated HTML reflects the current webpack build and its emitted assets. The plugin also supports customization of which chunks to include or exclude and where in the document to inject scripts.

Usage typically involves importing the plugin and adding it to the webpack configuration’s plugins array. For example, one might write: const HtmlWebpackPlugin = require('html-webpack-plugin'); ... plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', inject: 'body' }) ]; This configuration produces an index.html in the output directory with script tags for the emitted bundles.

In the ecosystem, html-webpack-plugin is a standard tool in modern webpack workflows, maintained within the webpack community and widely adopted for simplifying HTML generation alongside asset compilation.