What do we need to build a web application?
- HTML file or template
- style source files
- JavaScript source files
- Webpack to compile resources
- html-bundler-webpack-plugin to compile an HTML template containing references to source styles, scripts, images, etc.
Using the HTML bundler plugin for Webpack, you can specify the source files of styles, scripts, images and other resources directly in the template. The plugin detects all source files and replaces them with output filenames of processed resources.
This plugin supports any templating engine "out of the box", e.g.: EJS, Eta, Handlebars, Nunjucks and others. You don't need additional plugins and loaders.
Simple usage example
Add source scripts and styles directly to HTML:
<html>
<head>
<!-- specify source style files -->
<link href="./style.scss" rel="stylesheet">
<!-- specify source script files here and/or in body -->
<script src="./main.js" defer="defer"></script>
</head>
<body>
<h1>Hello World!</h1>
<!-- specify source image files -->
<img src="./map.png">
</body>
</html>
Add the template files to the entry plugin option in webpack.config.js:
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
plugins: [
new HtmlBundlerPlugin({
// define a relative or absolute path to template pages
entry: 'src/views/',
// OR define templates manually
entry: {
index: 'src/views/home.html', // => dist/index.html
'news/sport': 'src/views/news/sport/index.html', // => dist/news/sport.html
},
js: {
// output filename of JS
filename: 'assets/js/[name].[contenthash:8].js',
},
css: {
// output filename of CSS
filename: 'assets/css/[name].[contenthash:8].css',
},
}),
],
module: {
rules: [
{
test: /\.(css|sass|scss)$/,
use: ['css-loader', 'sass-loader'],
},
{
test: /\.(ico|png|jp?g|svg)$/,
type: 'asset/resource',
generator: {
filename: 'assets/img/[name].[hash:8][ext][query]',
},
},
],
},
};
Optional you can define the output filename of JS and CSS using the js.filename and css.filename plugin options.
The generated HTML contains the output filenames of the processed source files, while the script and link tags remain in place:
<html>
<head>
<link href="assets/css/style.05e4dd86.css" rel="stylesheet">
<script src="assets/js/main.f4b855d8.js" defer="defer"></script>
</head>
<body>
<h1>Hello World!</h1>
<img src="assets/img/map.58b43bd8.png">
</body>
</html>
Now you can use the template as an entrypoint to easily bind all source resources to HTML.
Note
The powerful
html-bundler-webpack-pluginworks standalone, without additional plugins and loaders such as:html-webpack-plugin,mini-css-extract-plugin,html-loader,style-loader, don't install them.
For a quick start, you can use the multiple pages boilerplate.
The complete documentation with examples see on the GitHub.
Top comments (2)
Similar to Vite?
Yes, similar to Vite, in addition no longer need to define source style files in JavaScript. You can define any global
main.scsscontaining styles of all used components once. And themain.scsscan be defined inindex.html. This way is easily and intuitive.Yes of cause, you can import styles in JS, but it is
bad practice.