Skip to content
Get packs

HTML Webpack Plugin

A webpack plugin that generates HTML files which load your bundled JavaScript and CSS.

GitHub Download 2.29.0
Stars
10.7k
Forks
1.3k
Licence
MIT
Language
JavaScript
Last update
2 months ago
Type
Library

What it is

When webpack bundles your app, the output files often have changing names (for example, including a hash). This plugin writes an HTML page that already links to those files, so you don't have to update the HTML by hand after each build. You can have it generate a page automatically, use your own lodash template, or use your own loader.

  • Generate an index.html that links to hashed JavaScript and CSS bundles automatically
  • Write a custom lodash-template HTML file with webpack bundle links injected
  • Add extra plugins for favicons, resource hints, or Content Security Policy meta tags

Great for

  • Developers with existing webpack 4 or webpack 5 projects that build a web page
  • Projects whose bundle filenames change with a hash on every build
  • Teams that want a zero-configuration default HTML page from webpack
  • Maintainers of older webpack setups that already depend on this plugin

Not ideal for

  • New projects: the README says the plugin is deprecated and points to webpack's built-in Native HTML guide instead
  • Non-developers who need a ready-made website builder, since this is a build-tool plugin that requires webpack configuration
  • Projects that do not use webpack
Step-by-step guide: how to use HTML Webpack PluginInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js · webpack

    Install with npm (webpack 5)

    npm i --save-dev html-webpack-plugin

    Install with yarn (webpack 5)

    yarn add --dev html-webpack-plugin

    Install with npm (webpack 4)

    npm i --save-dev html-webpack-plugin@4
  2. 2

    Run it

    • Install the plugin with npm or yarn as shown in the README
    • Add the plugin to the plugins array in your webpack configuration
    • Run your webpack build to produce the HTML file alongside your bundles
  3. 3

    Get the most out of it

    • Use the Zero Config default if you only need a basic page
    • Read the events and hooks section of the README to customize output
    • Combine with companion plugins listed in the README, such as favicons-webpack-plugin or csp-html-webpack-plugin
    • Review the Native HTML migration guide linked in the README if you are starting a new project

Downloads

Source code (.zip)main branch · straight from GitHubRelease 2.29.0Release notes and source

Strengths

  • Works without configuration for a basic page, according to the README
  • Has a hook system and a list of companion plugins that extend its behavior
  • Widely used, with about 10,700 GitHub stars and an MIT license

Trade-offs

  • The README marks the project as deprecated; webpack now offers native HTML output
  • Install instructions differ by webpack version (for example, webpack 4 needs the @4 tag)
  • The README provided is truncated, so detailed options are not covered here

How it compares

ProjectStarsTypeLevelUpdatedBest for
html-webpack-plugin (this)10.7kLibraryintermediate2 months agoDevelopers with existing webpack 4 or webpack 5 projects that build a web page
react-loadable16.5kLibraryintermediate2.3 years agoReact developers whose main JavaScript bundle has grown large
svgr11.1kLibrarybeginner8 months agoReact developers who import SVG icons or logos into components
storybook91.4kDev toolintermediate4 days agoFrontend teams building a shared component library or design system
webpack66kDev toolintermediate4 days agoFrontend developers building single-page or multi-page web apps
mojs18.9kLibraryintermediate3 months agoFront-end developers who want decorative animated effects like bursts, shapes, or icon animations

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.