# jantimon/html-webpack-plugin

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jantimon-html-webpack-plugin).**

10,728 stars · 1,291 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/jantimon/html-webpack-plugin
- awesome-repositories: https://awesome-repositories.com/repository/jantimon-html-webpack-plugin.md

## Topics

`html-webpack-plugin` `webpack`

## Description

This project is a Webpack HTML generator and template engine that creates HTML files and automatically injects compiled script and style bundles. It functions as an asset injection tool and build process minifier to automate the production of web pages.

The tool differentiates itself through a customizable template system that supports dynamic variable injection, programmatic content generation, and the ability to generate multiple distinct HTML entry points for multi-page applications. It also provides a hook-based lifecycle pipeline, allowing for the modification of assets and tags before the final output is written.

The software covers a broad range of asset management capabilities, including chunk filtering, sorting, and loading strategy configuration. It handles metadata injection for base URLs and meta tags, manages content hashing for browser caching, and provides options for inline asset embedding and path management.

The system produces optimized output by removing whitespace and comments through built-in HTML minification.

## Tags

### Web Development

- [Build Automations](https://awesome-repositories.com/f/web-development/build-automations.md) — Automates the production of web pages by bundling and injecting scripts, styles, and metadata during the build process.
- [Asset Injection](https://awesome-repositories.com/f/web-development/document-head-management/stylesheet-injection/asset-injection.md) — Provides a mechanism to control the placement and loading order of JavaScript and CSS chunks within generated HTML. ([source](https://github.com/jantimon/html-webpack-plugin/tree/main/examples))
- [Asset Injection Controls](https://awesome-repositories.com/f/web-development/asset-injection-controls.md) — The tool defines exactly where scripts and styles appear using template parameters to manually place tags. ([source](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/custom-insertion-position))
- [Bundle-to-HTML Integration](https://awesome-repositories.com/f/web-development/bundle-to-html-integration.md) — Automatically generates HTML files that link to the compiled JavaScript and CSS bundles produced by Webpack.
- [Structure Definitions](https://awesome-repositories.com/f/web-development/custom-template-tags/structure-definitions.md) — Allows the definition of custom HTML structures and the injection of dynamic parameters using templates or functions. ([source](https://github.com/jantimon/html-webpack-plugin/blob/main/CHANGELOG.md))
- [HTML Entry Point Generators](https://awesome-repositories.com/f/web-development/html-entry-point-generators.md) — Automatically creates HTML entry files that include the necessary script and style tags for compiled assets. ([source](https://github.com/jantimon/html-webpack-plugin#readme))
- [HTML Templating Engines](https://awesome-repositories.com/f/web-development/html-templating-engines.md) — Functions as a template engine to process structured templates and generate the final HTML for web applications.
- [Multi-Page Entry Point Generation](https://awesome-repositories.com/f/web-development/multi-page-entry-point-generation.md) — Enables the creation of separate HTML files by initializing multiple plugin instances with distinct configurations.
- [Multiple Entrypoint Generation](https://awesome-repositories.com/f/web-development/multiple-entrypoint-generation.md) — Enables the generation of multiple distinct HTML entry points within a single build configuration. ([source](https://github.com/jantimon/html-webpack-plugin#readme))
- [Script Loading Strategies](https://awesome-repositories.com/f/web-development/script-loading-strategies.md) — Implements configurable loading strategies for script and style tags, such as using defer or module attributes.
- [Asset Path Resolvers](https://awesome-repositories.com/f/web-development/asset-path-resolvers.md) — Overrides default path generation using absolute or relative paths and placeholders for cache busting. ([source](https://github.com/jantimon/html-webpack-plugin/blob/main/CHANGELOG.md))
- [HTML Output Optimizers](https://awesome-repositories.com/f/web-development/html-output-optimizers.md) — Minifies HTML output by removing redundant attributes, whitespace, and comments to improve performance. ([source](https://github.com/jantimon/html-webpack-plugin#readme))
- [HTML Whitespace Minifiers](https://awesome-repositories.com/f/web-development/html-whitespace-minifiers.md) — Reduces HTML file size by stripping unnecessary whitespace and comments during the build process.

### Development Tools & Productivity

- [Multi-Page Application Builders](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-orchestration-logic/build-orchestration-configuration/build-automation-systems/build-tools/module-bundlers/multi-page-application-builders.md) — Supports the creation of multiple distinct HTML entry points, each with its own required asset bundles, for multi-page applications.
- [Webpack Asset Generators](https://awesome-repositories.com/f/development-tools-productivity/webpack-asset-generators.md) — Automatically creates HTML files and injects the script and style bundles produced by Webpack.
- [Build Lifecycle Hooks](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-orchestration-logic/build-system-extensibility/build-system-extensions/build-lifecycle-hooks.md) — Exposes event hooks that allow developers to intervene and modify assets or tags during the build lifecycle. ([source](https://github.com/jantimon/html-webpack-plugin/blob/main/CHANGELOG.md))

### DevOps & Infrastructure

- [Template Variable Injection](https://awesome-repositories.com/f/devops-infrastructure/automation-orchestration/task-execution-frameworks/automation-frameworks/config-templating/configuration-template-management/automation-variable-definitions/template-variable-injection.md) — Supports the replacement of placeholders in HTML templates with dynamic build-time variables. ([source](https://github.com/jantimon/html-webpack-plugin/tree/main/examples))
- [Asset Filename Hashing](https://awesome-repositories.com/f/devops-infrastructure/cache-management/asset-filename-hashing.md) — Handles the generation of HTML files with hashed asset filenames to ensure browsers load the latest versions.
- [Asset Minification](https://awesome-repositories.com/f/devops-infrastructure/cicd-pipeline-automation/core-build-engines/build-optimization/asset-minification.md) — Provides automated minification of the generated HTML to remove whitespace and comments for reduced transfer size.

### Software Engineering & Architecture

- [Asset Graph Mapping](https://awesome-repositories.com/f/software-engineering-architecture/asset-graph-mapping.md) — Analyzes the Webpack compilation state to identify and map the necessary script and style chunks for the output.
- [Dependency-Based Asset Sorting](https://awesome-repositories.com/f/software-engineering-architecture/dependency-based-asset-sorting.md) — Determines the order in which asset chunks are injected based on their underlying dependency graphs. ([source](https://github.com/jantimon/html-webpack-plugin/blob/main/CHANGELOG.md))
- [Pipeline Lifecycle Hooks](https://awesome-repositories.com/f/software-engineering-architecture/pipeline-lifecycle-hooks.md) — Provides a sequence of lifecycle hooks that allow external functions to modify assets and tags before the final file is written.

### User Interface & Experience

- [HTML Markup Templates](https://awesome-repositories.com/f/user-interface-experience/html-markup-templates.md) — Uses customizable HTML templates and strings to dynamically inject asset tags and metadata variables.
- [External File Integrations](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/configuration-and-integration/custom-template-integrations/external-file-integrations.md) — Injects assets into provided external files or strings using custom variables and template loaders. ([source](https://github.com/jantimon/html-webpack-plugin#readme))
- [Programmatic Generation](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/configuration-and-integration/custom-template-integrations/generation-templates/programmatic-generation.md) — Produces HTML content dynamically using JavaScript functions based on provided parameters. ([source](https://github.com/jantimon/html-webpack-plugin/blob/main/migration.md))
- [Meta Tag Managers](https://awesome-repositories.com/f/user-interface-experience/meta-tag-managers.md) — Includes utilities for adding custom meta tags, such as viewport and charset settings, to the generated HTML head. ([source](https://github.com/jantimon/html-webpack-plugin/blob/main/CHANGELOG.md))

### Part of an Awesome List

- [Asset Chunk Selection](https://awesome-repositories.com/f/awesome-lists/devtools/bundle-analysis/chunk-filtering/asset-chunk-selection.md) — Allows specifying which asset chunks to include or exclude in a file to control page dependencies. ([source](https://github.com/jantimon/html-webpack-plugin/blob/main/README.md))

### Programming Languages & Runtimes

- [Build Artifact Content Hashes](https://awesome-repositories.com/f/programming-languages-runtimes/content-hashing-utilities/build-artifact-content-hashes.md) — Adds unique content hashes to output filenames to enable long-term browser caching. ([source](https://github.com/jantimon/html-webpack-plugin/blob/main/README.md))