info

This plugin is all you need to generate a complete single- or multi-page website from your source assets.

The plugin automates the processing of source files such as JS/TS, SCSS, images and other assets referenced in an HTML or template file.This plugin will generate an HTML file containing all the necessary links to JS, CSS, images and other resources.

Key Features​

• Anentry point is any HTML template.Start from HTML or template, not from JS.
• Automatically processes templates found in theentry directory.
• Built-in support fortemplate engines:Eta,EJS,Handlebars,Nunjucks,Pug,Tempura,TwigJS,LiquidJS.
• Built-in support forMarkdown*.md files in templates, seeMarkdown demo in browser.
• Allows topass data into a template.
• Resolvesource files ofscripts,styles, images and other assets in HTML:
  • <link href="./style.scss" rel="stylesheet">
  • <script src="./app.ts" defer="defer"></script>
  • <link href="../images/favicon.svg" type="image/svg" rel=icon />
  • <img src="@img/pic.png" srcset="@img/pic2.png 1x, @img/pic3.png 2x" />
    Resolved assets will be processed and replaced with correct URLs in the generated HTML.
• Resolve references to source files of fonts, images in CSS:
  • @font-face { src: url('@fonts/monaco.woff2') ... }
  • background-image: url(../images/picture.png);
    Resolved assets will be processed and replaced with correct URLs in the generated CSS, without usingresolve-url-loader.
• Resolveroute URLs ina.href, useful for navigation in multi-pages.
• InlineJS,CSS andImages into HTML. Seehow to inline all resources into single HTML file.
• Supports importing styles in JavaScript.
• Supports styles used in*.vue.
• Supports theHMR for CSS to update CSS in browser without a full reload.
• Watches for changes in thedata file linked to the template in the plugin option.
• Generates thepreload tags for fonts, images, video, scripts, styles.
• Generates theintegrity attribute in thelink andscript tags.
• Generates thefavicons of different sizes for various platforms.
• Minimizes generated HTML.
• You can create custom plugins using the providedPlugin Hooks.
• Over 700tests for various use cases.

HTML template as entry point​

TheHTML Bundler generates static HTML ortemplate function fromvarious templates containing source files of scripts, styles, images, fonts and other resources, similar to how it works inVite.This plugin looks at the template files inentry option to start building the bundle.Thesource files of dependencies (scripts, styles, etc.) can be defined directly in the template.

The pluginresolves source files of assets in templates and replaces them with correct output URLs in the generated HTML.The resolved assets will be processed via Webpack plugins/loaders and placed into the output directory.You can use a relative path or Webpack alias to a source file.

A template imported in JS will be compiled intotemplate function. You can use thetemplate function in JS to render the template with variables in runtime on the client-side in the browser.

How the plugin works​

The plugin resolves references in the HTML template and adds them to the Webpack compilation.Webpack will automatically process the source files, and the plugin replaces the references with their output filenames in the generated HTML.Seehow the plugin works under the hood.

Why use the HTML Bundler Plugin?​

This plugin is a powerful alternative tohtml-webpack-plugin and a replacement for manyplugins and loaders.

The HTML Bundler Plugin works a bit differently thanhtml-webpack-plugin.It doesn't just inject JavaScript and CSS into an HTML.Instead, it resolves all the source files of the assets referenced directly in the templateand ensures the generated HTML contains the correct output URLs of resources after Webpack processes them.Additionally, CSS extracted from styles imported in JS can be injected into HTML as a<link> tag or as an inlined CSS.

Why do developers migrate from Webpack?​

In recent years, many developers have started migrating to alternatives likeVite.The reasons are clear: configuration complexity, developer experience, and build speed.

Complexity in Configuration​

One of the biggest pain points with Webpack is its verbose and complex configuration,especially when handling HTML files and assets.Traditionally, developers uses multiple plugins and loaders just to render their HTML templates,inject scripts, and optimize assets.

Thehtml-bundler-webpack-plugin solves this problem by simplifying the entire HTML bundling process:

• Supports HTML templates like EJS, Handlebars, Pug, and many others "out of the box".
• Resolves references to source assets in HTML, such as JavaScript/TypeScript, CSS/SCSS, images, fonts, and other resources.
• Automatically injects processed assets into HTML without extra plugins and loaders.
• Generates the preload tags, integrity attribute, favicons of different sizes.
• Minimizes generated HTML for production with built-in features.

Withhtml-bundler-webpack-plugin, Webpack setup becomes much simpler and clear,without complex HTML handling configurations, making Webpack more intuitive.

Related plugins and loaders​

Just one plugin replaces the functionality of the plugins and loaders:

Improved Developer Experience​

By using this plugin, Webpack can offer a modern developer experience (DX) comparable to Vite,while still providing the powerful features it is known for.

Build Speed and Performance​

Yes, Webpack is slower than Vite, but that comes with the reasons:

• More Flexibility – Webpack is highly configurable, allowing fine-tuned optimizations that other bundlers don’t support.
• Feature-Rich – Webpack handles complex builds, including custom loaders, asset processing, and advanced optimizations.
• Extensive Plugin Ecosystem – Webpack has a massive collection of plugins that extend its functionality, making it suitable for large and unique projects.
• Performance Improvements Exist – While Webpack may not match Vite’s speed, it offers caching, tree-shaking, and code-splitting to optimize builds.
• Still Ideal for Large Projects – Many enterprise applications continue using Webpack because of its power and ecosystem.