jantimon/html-webpack-plugin

★ 10,732JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((repo))
    What It Does
      Generates HTML files
      Injects asset tags
      Tracks hashed filenames
    Configuration
      Zero config setup
      Custom HTML template
      Multiple entry points
    Community Plugins
      Favicon generation
      Inline SVG injection
      CSP headers
      Resource preloading
    Compatibility
      Webpack 5 version
      Webpack 4 version

mindmap root((repo)) What It Does Generates HTML files Injects asset tags Tracks hashed filenames Configuration Zero config setup Custom HTML template Multiple entry points Community Plugins Favicon generation Inline SVG injection CSP headers Resource preloading Compatibility Webpack 5 version Webpack 4 version

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Automatically update HTML script tags when your webpack bundle filename changes due to content hashing between builds

USE CASE 2

Generate a working HTML entry point with zero configuration by simply adding the plugin to your webpack config

USE CASE 3

Use a custom HTML template as the base and let the plugin inject all asset references into it

USE CASE 4

Extend HTML generation with community plugins that add favicons, CSP headers, or resource preload hints

Tech stack

JavaScriptwebpackNode.jsnpm

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

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.

Copy-paste prompts

Prompt 1

My webpack build uses content hashing in filenames and I need the HTML file to always reference the correct bundle. Show me how to set up html-webpack-plugin in webpack.config.js.

Prompt 2

I want to use a custom HTML template with html-webpack-plugin instead of the default generated file. How do I configure the template option?

Prompt 3

I'm on webpack 4 and want to add html-webpack-plugin. What version should I install and what's the basic configuration?

Prompt 4

How do I use html-webpack-plugin to generate multiple separate HTML pages from a single webpack build with different entry points?

Open on GitHub → Explain another repo

← jantimon on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.