Registry / web-framework / html-webpack-plugin

html-webpack-plugin

library5.6.7jsnpmunverified

Plugin that simplifies creation of HTML files to serve your webpack bundles, especially useful for bundles with hashed filenames. Current stable version: 5.6.7. The plugin generates an HTML file for you, or you can provide your own template using lodash templates. It injects all webpack bundles into the HTML and supports a rich event system for extensibility. Key differentiators: zero-config setup, hooks for custom plugins, and support for multiple HTML files. Alternatives like HtmlBundlerPlugin or script-ext-html-webpack-plugin build on top of this. Actively maintained with frequent releases.

web-framework devops

npm install html-webpack-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · HTML-WEBPACK-PLUGI

html-webpack-plugin

web-frameworkjavascriptv5.6.7

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

HtmlWebpackPlugin

✓ import HtmlWebpackPlugin from 'html-webpack-plugin'

✗ const HtmlWebpackPlugin = require('html-webpack-plugin')

Default export. ESM works in Node 12+ with webpack. CJS via require also works.

HtmlWebpackPlugin

✓ const HtmlWebpackPlugin = require('html-webpack-plugin')

CommonJS require is also supported.

HtmlWebpackPlugin

✓ const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports.plugins.push(new HtmlWebpackPlugin())

✗ new require('html-webpack-plugin')()

Instantiate after import. Do not call require directly in constructor.

Basic webpack config using HtmlWebpackPlugin with a custom template and output filename.

Debug

Known issues

breakingVersion 5 requires webpack ^5.20.0. Using with webpack 4 requires version 4 of the plugin.

fix

If using webpack 4, install html-webpack-plugin@4. For webpack 5, ensure webpack ^5.20.0.

affects: >=5.0.0

gotchaThe plugin replaces the entire body content by default. To avoid removing existing content, use 'inject' option.

fix

Set 'inject' to 'head' or 'body' explicitly, or use a custom template with manual injection.

affects: *

deprecatedThe 'compilation' event hooks are deprecated in favor of the new hook system in webpack 5.

fix

Migrate to using 'htmlWebpackPluginAlterAssetTags' or other new hooks.

affects: >=5.0.0

gotchaIf you use 'chunks' option, only those chunks are included. Omitting 'chunks' includes all chunks by default.

fix

Be explicit with 'chunks' option to avoid unexpected bundles. Use 'excludeChunks' to exclude specific ones.

affects: *

gotchaMinification can corrupt HTML if not configured properly. Default minification uses html-minifier-terser.

fix

Configure 'minify' option or set to false. Known issue: removing quotes or collapsing boolean attributes may break certain elements.

affects: *

Errors

Common errors & fixes

Error: HtmlWebpackPlugin: could not load file: /path/to/template.html

Template path is incorrect or file does not exist.

fix

Ensure 'template' option points to an existing file. Use absolute path or relative to webpack context.

Module not found: Error: Can't resolve 'html-webpack-plugin'

Package not installed or not in node_modules.

fix

Run 'npm install --save-dev html-webpack-plugin' or 'yarn add --dev html-webpack-plugin'.

TypeError: HtmlWebpackPlugin is not a constructor

Incorrect import: used named import instead of default.

fix

Use default import: 'import HtmlWebpackPlugin from 'html-webpack-plugin'' or 'const HtmlWebpackPlugin = require('html-webpack-plugin')'.

Upgrade

Version history

5.6.7latest on npm

Audit

Dependencies

webpackrequiredpeer dependency: requires webpack ^5.20.0 for v5

@rspack/coreoptionalpeer dependency: optional support for rspack

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/jantimon/html-webpack-plugin ↗

packagehttps://www.npmjs.com/package/html-webpack-plugin ↗