New way to build a web application with Webpack
Tags: webpack, html, javascript, webdev
Published: 2023-06-25 14:09:55

<img height="200" src="https://raw.githubusercontent.com/webdiscus/html-bundler-webpack-plugin/master/images/plugin-logo.png">

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](https://github.com/webdiscus/html-bundler-webpack-plugin) to compile an HTML template containing references to source styles, scripts, images, etc.

Using the [HTML bundler plugin for Webpack](https://github.com/webdiscus/html-bundler-webpack-plugin), you can specify the source files of styles, scripts, images and other resources directly in the template. The plugin detects all [source files](https://github.com/webdiscus/html-bundler-webpack-plugin#sources) and replaces them with output filenames of processed resources.

This plugin supports any [templating engine](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-template-engine) "out of the box", e.g.: [EJS](https://github.com/webdiscus/html-bundler-webpack-plugin#using-the-ejs), [Eta](https://github.com/webdiscus/html-bundler-webpack-plugin#using-the-eta), [Handlebars](https://github.com/webdiscus/html-bundler-webpack-plugin#using-the-handlebars), [Nunjucks](https://github.com/webdiscus/html-bundler-webpack-plugin#using-the-nunjucks) and others. You don't need additional plugins and loaders.

## Simple usage example

Add source scripts and styles directly to HTML:

```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`:

```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](https://github.com/webdiscus/html-bundler-webpack-plugin#option-js) and [css.filename](https://github.com/webdiscus/html-bundler-webpack-plugin#option-css) plugin options.

The generated HTML contains the output filenames of the processed source files, while the `script` and `link` tags remain in place:

```html
<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-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](https://github.com/webdiscus/html-bundler-webpack-plugin#features).

For a quick start, you can use the [multiple pages boilerplate](https://github.com/webdiscus/webpack-html-scss-boilerplate).

The complete documentation with examples see on the [GitHub](https://github.com/webdiscus/html-bundler-webpack-plugin).

{% cta https://github.com/webdiscus/html-bundler-webpack-plugin %} Give HTML Bundler Plugin for Webpack a ⭐️ on GitHub {% endcta %}