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

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

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

Highlights

• An entry point is any HTML template. Start from HTML or template, not from JS.
• Automatically processes templates found in the entry directory.
• Built-in support for template engines: Eta, EJS, Handlebars, Nunjucks, Pug, Tempura, TwigJS, LiquidJS.
• Built-in support for Markdown *.md files in templates, see Markdown demo in browser.
• Allows to pass data into a template.
• Resolve source files of scripts, 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 using resolve-url-loader.
• Resolve route URLs in a.href, useful for navigation in multi-pages.
• Inline JS, CSS and Images into HTML. See how to inline all resources into single HTML file.
• Supports importing styles in JavaScript.
• Supports styles used in *.vue.
• 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.
• Minimizes generated HTML.
• You can create custom plugins using the provided Plugin Hooks.

>> GitHub

Documentation

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

For full documentation, visit HTML Bundler Docs.