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

npm 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.

• 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.

• Resolve source files of script, style

  • <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="@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.

• 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 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.

GitHub

Documentation

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

For full documentation, visit HTML Bundler Docs.