DEV Community

webdiscus
webdiscus

Posted on • Edited on

New way to build a web application with Webpack

#javascript #webdev #webpack #html

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>
Enter fullscreen mode Exit fullscreen mode

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]',
        },
      },
    ],
  },
};
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Now you can use the template as an entrypoint to easily bind all source resources to HTML.

Note

The powerful html-bundler-webpack-plugin works 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.

Give HTML Bundler Plugin for Webpack a ⭐️ on GitHub

Top comments (2)

Collapse
 
devgancode profile image
Ganesh Patil •

Similar to Vite?

Collapse
 
webdiscus profile image
webdiscus •

Yes, similar to Vite, in addition no longer need to define source style files in JavaScript. You can define any global main.scss containing styles of all used components once. And the main.scss can be defined in index.html. This way is easily and intuitive.

Yes of cause, you can import styles in JS, but it is bad practice.