https://github.com/webdiscus/html-bundler-webpack-plugin
Build websites with easy. HTML as Entry Point. Supports Markdown, Eta, EJS, Handlebars, Nunjucks, Pug, Twig templates "out of the box".
https://github.com/webdiscus/html-bundler-webpack-plugin
bundler css ejs entry favicon handlebars html integrity javascript loader markdown nunjucks preload scss style template twig webpack
Last synced: 2 months ago
JSON representation
Build websites with easy. HTML as Entry Point. Supports Markdown, Eta, EJS, Handlebars, Nunjucks, Pug, Twig templates "out of the box".
- Host: GitHub
- URL: https://github.com/webdiscus/html-bundler-webpack-plugin
- Owner: webdiscus
- License: isc
- Created: 2023-01-06T22:36:21.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-04-17T17:08:36.000Z (3 months ago)
- Last Synced: 2025-05-05T11:48:07.648Z (2 months ago)
- Topics: bundler, css, ejs, entry, favicon, handlebars, html, integrity, javascript, loader, markdown, nunjucks, preload, scss, style, template, twig, webpack
- Language: JavaScript
- Homepage:
- Size: 60.5 MB
- Stars: 171
- Watchers: 8
- Forks: 15
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/html-bundler-webpack-plugin 'download npm package')
[](https://nodejs.org)
[](https://webpack.js.org)
[](https://github.com/webdiscus/html-bundler-webpack-plugin/actions/workflows/test.yml)
[](https://codecov.io/gh/webdiscus/html-bundler-webpack-plugin)
[](https://www.npmjs.com/package/html-bundler-webpack-plugin)
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
```bash
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 `` tags for assets to enhance resource loading.
- **Generates integrity attributes**: Adds `integrity` attributes to `` and `` 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](https://webdiscus.github.io/html-bundler-webpack-plugin/category/getting-started)
- [Migrating from `html-webpack-plugin`](https://webdiscus.github.io/html-bundler-webpack-plugin/getting-started/migrating-from-html-webpack-plugin)
- [Features](https://webdiscus.github.io/html-bundler-webpack-plugin/introduction#key-features)
- [Options](https://webdiscus.github.io/html-bundler-webpack-plugin/category/options)
- [Guides](https://webdiscus.github.io/html-bundler-webpack-plugin/guides)
- [F.A.Q.](https://webdiscus.github.io/html-bundler-webpack-plugin/faq/import-url-in-css)
For full documentation, visit [HTML Bundler Docs](https://webdiscus.github.io/html-bundler-webpack-plugin).
## Read it
- [Why do developers migrate from Webpack?](https://webdiscus.github.io/html-bundler-webpack-plugin/introduction#why-do-developers-migrate-from-webpack)
- [Use a HTML file as an entry point?](https://github.com/webpack/webpack/issues/536) (Webpack issue, #536)
- [Using HTML Bundler Plugin for Webpack to generate HTML files](https://dev.to/webdiscus/using-html-bundler-plugin-for-webpack-to-generate-html-files-30gd)
- [Keep output directory structure in Webpack](https://dev.to/webdiscus/how-to-keep-the-folder-structure-of-source-templates-in-webpack-for-output-html-files-39bj)
- [Auto generate an integrity hash for `link` and `script` tags](https://dev.to/webdiscus/webpack-auto-generate-an-integrity-hash-for-link-and-script-tags-in-an-html-template-48p5)
## Support & Appreciation
```text
If this plugin helps you, consider giving it a ⭐ to show your support!
```
## Sponsors & Patrons
Thank you to all our sponsors and patrons!
<a href="https://www.jetbrains.com/"><img src="https://avatars.githubusercontent.com/u/878437?s=50&v=4" title="JetBrains" alt="JetBrains"></a>
<a href="https://github.com/getsentry"><img src="https://avatars.githubusercontent.com/u/1396951?s=50&v=4" title="Sentry" alt="Sentry"></a>
<a href="https://github.com/stackaid"><img src="https://avatars.githubusercontent.com/u/84366591?s=50&v=4" title="StackAid" alt="StackAid"></a>
<a href="https://www.patreon.com/user?u=96645548"><img src="https://c10.patreonusercontent.com/4/patreon-media/p/user/96645548/020234154757463b939824efe62db137/eyJ3IjoyMDB9/1.jpeg?token-time=2145916800&token-hash=GYnR3xvy7qBr2w1CihOfDOq87nOr4AbuW0ytvwg7Kgs%3D" width="50" title="Buckley Robinson"></a>
<a href="https://github.com/MarcelRobitaille"><img src="https://avatars.githubusercontent.com/u/8503756?s=50&v=4" title="Marcel Robitaille" alt="Marcel Robitaille"></a>
<a href="https://github.com/kannwism"><img src="https://avatars.githubusercontent.com/u/18029781?s=50&v=4" width="50" title="Marian Kannwischer (kannwism)"></a>
<a href="https://www.patreon.com/user?u=96645548"><img src="https://c10.patreonusercontent.com/4/patreon-media/p/user/43568167/0ef77126597d460c9505bdd0aea2eea9/eyJ3IjoyMDB9/1.png?token-time=2145916800&token-hash=7izh1FZTToAqf4Qks3Qrk8YcNbGymF-sBi0hkK_aJO8%3D" width="50" title="Raymond Ackloo"></a>
<a href="https://github.com/chkpnt"><img src="https://avatars.githubusercontent.com/u/1956979?s=50&v=4" width="50" title="Gregor Dschung" alt="Gregor Dschung"></a>
<a href="https://github.com/daltonboll"><img src="https://avatars.githubusercontent.com/u/5821829?v=4" width="50" title="Dalton Boll" alt="daltonboll"></a>
