Guide · Open source
How to use html-webpack-plugin: install and setup guide
Updated · written with AI from the project's own documentation and checked against our catalogue data
html-webpack-plugin is a webpack plugin that writes an HTML file which already links to your bundles. It helps most when bundle filenames include a hash that changes on every build, because you don't have to edit the HTML by hand each time. This guide covers installation, the zero-configuration default, custom templates, and a deprecation notice you should read before starting a new project.
HTML Webpack Pluginjantimon/html-webpack-plugin · ★ 10.7k · MIT Install options & downloads Quick start
- 1Check prerequisites. Confirm that Node.js and webpack are installed in your project. This plugin is a webpack plugin and does not work without webpack.
- 2Pick the right install command. Use the npm or yarn command for webpack 5, or the @4 version for webpack 4.
- 3Install the plugin. Run npm i --save-dev html-webpack-plugin or yarn add --dev html-webpack-plugin in your project folder.
- 4Add the plugin to webpack. Register the plugin in your webpack configuration so it generates the HTML page on build.
- 5Run a build. Run your webpack build and check that the generated HTML file links to the bundle files.
- 6Add a template if needed. If you need your own markup, supply a lodash template or use your own loader, as described in the README.
- 7Consider migrating. For new work, read webpack's Native HTML guide and its migration guide, since the README marks this plugin as deprecated.
Check whether this plugin fits your project
The plugin is for projects that already use webpack and build a web page. It is a build-tool plugin, so you need to edit webpack configuration to use it. The README says the plugin is deprecated and points to webpack's Native HTML guide for new projects.
- Good fit: existing webpack 4 or webpack 5 projects that build a web page
- Good fit: bundle filenames that change with a hash on every build
- Good fit: older webpack setups that already depend on this plugin
- Not a fit: new projects, since the README recommends the Native HTML guide
- Not a fit: projects that do not use webpack
Install html-webpack-plugin with npm or yarn
The README lists separate commands for webpack 5 and webpack 4. Run the command that matches your webpack version inside your project. Prerequisites are Node.js and webpack.
- webpack 5 with npm: use the npm command below
- webpack 5 with yarn: use the yarn command below
- webpack 4: install the version 4 package with the @4 tag, shown in the third line
npm i --save-dev html-webpack-plugin
yarn add --dev html-webpack-plugin
npm i --save-dev html-webpack-plugin@4Use the zero-config default
The README states that the plugin works without configuration. You can add it to a webpack setup and let it generate an HTML page that links to your bundles. The README also notes it pairs well with the webpack-config-plugins zero-config dev server example.
- Install the plugin with the command for your webpack version
- Add the plugin to your webpack configuration
- Run your normal webpack build and open the generated HTML file
Customise the page with templates or a loader
If the generated page is not enough, the README says you can supply your own template using lodash templates, or use your own loader instead. Pick one of these two routes depending on how much markup you need to control.
- Lodash template: write your own HTML structure in a lodash template
- Own loader: use a loader of your choice to produce the HTML
- Hooks: the plugin exposes events, documented in the README under Events, for extending its behaviour
Extend it with other plugins
The README lists many plugins that work with html-webpack-plugin. Examples include favicons-webpack-plugin for icons on iOS, Android and desktop, html-webpack-inline-svg-plugin for inlining SVGs in the HTML, and csp-html-webpack-plugin for adding Content Security Policy meta tags.
- favicons-webpack-plugin: generates favicons and icons
- html-webpack-inline-svg-plugin: inlines SVGs in the HTML output
- resource-hints-webpack-plugin: adds preload and prefetch link tags
- csp-html-webpack-plugin: adds Content Security Policy meta tags
What people use it for
- Building a single-page app where the bundle filename includes a hash that changes on each build
- Maintaining an older webpack 4 project that already depends on this plugin
- Adding favicons or inline SVGs to a generated page by combining it with companion plugins
- Generating a page with a custom lodash template when the default output is not enough
Frequently asked questions
How do I install html-webpack-plugin?
Run npm i --save-dev html-webpack-plugin for webpack 5 with npm, or yarn add --dev html-webpack-plugin with yarn. The README says prerequisites are Node.js and webpack, so install those first.
Which version should I use with webpack 4?
The README gives a separate command for webpack 4: npm i --save-dev html-webpack-plugin@4. Use the @4 tag so the package matches your webpack version.
Is html-webpack-plugin free to use?
The licence listed for this project is MIT. The source does not mention pricing for the plugin.
Is html-webpack-plugin deprecated?
Yes. The README warns that the plugin is deprecated and recommends webpack's Native HTML guide for new projects. Existing setups keep working because webpack only emits a page when you ask for one with output.html.
What are the alternatives to html-webpack-plugin?
The project lists webpack's native HTML output (output.html) as a comparable option. Companion plugins such as favicons-webpack-plugin and html-webpack-inline-svg-plugin are listed as complements that add features, not full replacements.
Does html-webpack-plugin need configuration?
No, the README says it works without configuration and can generate an HTML file automatically. You only need configuration if you want a custom template or loader.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use html-webpack-plugin if you already run webpack and want an existing or legacy setup to keep generating HTML that links to hashed bundles. Pick webpack's native HTML output for a new project, because the README marks this plugin as deprecated.
Install options & downloads