The plugin automates the creation of complete web pages by processing HTML templates with linked assets. It resolves dependencies, compiles templates, and ensures that the output HTML contains correct output URLs.

Install

npm install html-bundler-webpack-plugin --save-dev

What does the HTML Bundler do?

• Treats HTML as an entry point: Initiates the build process from HTML, allowing direct inclusion of source asset files like scripts and styles.
• Processes HTML templates: Supports various template engines such as EJS, Handlebars, Nunjucks, Pug, and more.
• Handles dependencies: Resolves source files referenced in HTML, such as SCSS, JS, images, updating their references with correct output URLs.
• Inlines resources: Provides options to inline JavaScript, CSS, and images.
• Generates preload tags: Creates <link rel="preload"> tags for assets to enhance resource loading.
• Generates integrity attributes: Adds integrity attributes to <link> and <script> tags to ensure resource integrity and security.
• Generates favicons: Creates favicons of various sizes for different platforms and injects them into the HTML.

Documentation

• Get Started
• Migrating from html-webpack-plugin
• Features
• Options
• Guides
• F.A.Q.

For full documentation, visit HTML Bundler Docs.

Read it

• Why do developers migrate from Webpack?
• Use a HTML file as an entry point? (Webpack issue, #536)
• Using HTML Bundler Plugin for Webpack to generate HTML files
• Keep output directory structure in Webpack
• Auto generate an integrity hash for link and script tags

Support & Appreciation

If this plugin helps you, consider giving it a ⭐ to show your support!

Sponsors & Patrons

Thank you to all our sponsors and patrons!