HTML Bundler Plugin for Webpack
_{All-in-one Web Bundler}

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.

Why use the HTML Bundler Plugin?

This plugin is a powerful alternative to html-webpack-plugin and a replacement for many plugins and loaders.

The HTML Bundler Plugin works a bit differently than html-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 template and 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.

📋 Table of Contents 🚀Install and Quick Start 🖼 Usage examples

💡 Highlights

• An entry point is any HTML template. Start from HTML, not from JS.
• Automatically processes templates found in the entry directory.
• Build-in support for template engines: Eta, EJS, Handlebars, Nunjucks, Pug, Tempura, TwigJS, LiquidJS.
• Build-in support for Markdown *.md files in templates, see Markdown demo in browser.
• Source files of script and style can be specified directly in HTML:
  • <link href="./style.scss" rel="stylesheet">
    No longer need to define source style files in Webpack entry or import styles in JavaScript.
  • <script src="./app.ts" defer="defer"></script>
    No longer need to define source JavaScript files in Webpack entry.
• Resolves source files of assets in attributes such as href src srcset using relative path or alias:
  • <link href="../images/favicon.svg" type="image/svg" rel=icon />
  • <img src="@images/pic.png" srcset="@images/pic400.png 1x, @images/pic800.png 2x" />
    Source files will be resolved, processed and auto-replaced with correct URLs in the generated HTML.
• Resolves route URLs in a.href, useful for navigation in multi-pages.
• Inlines JS, CSS and Images into HTML. See how to inline all resources into single HTML file.
• Supports the HMR for CSS to update CSS in browser without a full reload.
• Watches for changes in the data file linked to the template in the plugin option.
• Generates the preload tags for fonts, images, video, scripts, styles.
• Generates the integrity attribute in the link and script tags.
• Generates the favicons of different sizes for various platforms.
• You can create custom plugins using the provided Plugin Hooks.
• Over 700 tests for various use cases.

📖 See full documentation on GitHub.