html-webpack-plugin
Simplifies creation of HTML files to serve your webpack bundles
A webpack plugin that automatically generates your HTML file and injects the correct script and stylesheet tags for each build, even when filenames change due to content hashing.
This is a plugin for webpack, a popular tool that bundles JavaScript, CSS, and other web assets into optimized files for a website or web application. The specific problem it solves is HTML file generation: when webpack builds your project, it produces output files whose names often include a unique hash or fingerprint that changes every time the code changes. Manually keeping your HTML file pointing to the correct filenames would be tedious and error-prone, so this plugin handles it automatically.
When you add the html-webpack-plugin to your webpack configuration, it generates an HTML file for you and injects the correct script and stylesheet tags pointing to whatever webpack produced in that build. If your JavaScript bundle filename changes between builds, the generated HTML always references the right one. You can start with zero configuration and get a working HTML file right away, or you can provide your own HTML template and the plugin will use that as the base, filling in the asset references for you.
The plugin has a hook system that lets other plugins extend its behavior. A long list of community plugins builds on top of it, adding things like favicon generation, inline SVG injection, Content Security Policy headers, resource preloading hints, and stylesheet media attribute handling. Each of these integrates with the same plugin without requiring extra configuration.
Installation is done through npm or yarn, the standard JavaScript package managers. There are two versions available: one for webpack 5 (the current major version) and one for webpack 4 (the older version still in use in many projects). The plugin works on any operating system where webpack runs.
The full README is longer than what was shown.
Where it fits
- Automatically update HTML script tags when your webpack bundle filename changes due to content hashing between builds
- Generate a working HTML entry point with zero configuration by simply adding the plugin to your webpack config
- Use a custom HTML template as the base and let the plugin inject all asset references into it
- Extend HTML generation with community plugins that add favicons, CSP headers, or resource preload hints