v4.0.0

BREAKING CHANGES

• Supports Node.js version 18+.

• Supports Webpack version 5.81+.

• The plugin option property is not static anymore:

  OLD (up to v3.x)

  class MyPlugin extends HtmlBundlerPlugin {
    constructor(options = {}) {
      super({ ...options });
    }
    init(compiler) {
      // MyPlugin.option. ...; <= was as static property
    }
  }
  

  NEW (since v4.0)

  class MyPlugin extends HtmlBundlerPlugin {
    constructor(options = {}) {
      super({ ...options });
    }
    init(compiler) {
      // this.option. ...; <= now is non static property
    }
  }
  

• Using the addProcess() plugin method is changed:

  OLD (up to v3.x)

  class MyPlugin extends HtmlBundlerPlugin {
    constructor(options = {}) {
      super({ ...options });
    }
    init(compiler) {
      // the method was as property of the static `option`
      MyPlugin.option.addProcess('postprocess', (content) => {
        return content;
      });
    }
  }
  

  NEW (since v4.0)

  class MyPlugin extends HtmlBundlerPlugin {
    constructor(options = {}) {
      super({ ...options });
    }
    init(compiler) {
      // now is the class method
      this.addProcess('postprocess', (content) => {
        return content;
      });
    }
  }
  

DEPRECATIONS

• The watchFiles.files option has been renamed to watchFiles.includes.
  The files option is still supported but is deprecated.
  It's recommended to replace the files with includes in your config.

• The watchFiles.ignore option has been renamed to watchFiles.excludes.
  The ignore option is still supported but is deprecated.
  It's recommended to replace the ignore with excludes in your config.

FEATURES

• Added support the multiple webpack configuration:

const path = require('path');
const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');

module.exports = [
  {
    name: 'first',
    output: {
      path: path.join(__dirname, 'dist/web1/'),
    },
    plugins: [
      new HtmlBundlerPlugin({
        entry: {
          index: './web1/views/home.html',
        },
      }),
    ],
  },

  {
    name: 'second',
    output: {
      path: path.join(__dirname, 'dist/web2'),
    },
    plugins: [
      new HtmlBundlerPlugin({
        entry: {
          index: './web2/views/home.html',
        },
      }),
    ],
  },
];

• Display webpack config name in console output:

  module.exports = {
    name: 'client', // <= this name will displayed in console output
  }
  

BUGFIX

• Fixed ERROR in RealContentHashPlugin in serv/watch mode after adding new import file.
• Fixed ERROR in RealContentHashPlugin when using integrity in serv/watch mode after changes by using dynamic import.

MISC

• Refactored all static classes to regular, this is needed to support webpack multiple configurations.
• Updated dev packages, many packages requires Node.js >= v18.

Cumulative Release v3.13.0 - v3.17.4

Features

• Added support the ?inline query for styles imported in JavaScript:

  import './style-a.css?inline'; // the extracted CSS will be injected into HTML
  import './style-b.css'; // the extracted CSS will be saved into separate output file
  

• Added runtime option for the handlebars preprocessor.
• Updated eta package to latest version 3.4.0.
• Added watchFiles.includes and watchFiles.excludes options to allow watch specifically external file,
  e.g. *.md file included via Pug filter from any location outer project directory.
• Added resolving the url() value in the style attribute:

  <div style="background-image: url(./image.png);"></div>
  

Bug Fixes

• Fixed ERROR in RealContentHashPlugin when using integrity in serv/watch mode after changes in dynamic imported JS files or after adding new import file
• Fixed issue in dev mode imports SCSS in JS when in the same file is inlined another SCSS file via ?inline query, #102.
• Fixed error when integrity option is enabled but no template defined in entry, #107.
• Fixed issue when using the integrity option, leaves the original attributes in the script tag as is.
• Resolving source file in a tag attribute when another attribute contains the > char, e.g.:

  <img src="./arrow.png" alt="right->">
  

Cumulative Release v3.6.0 - v3.12.0

Features

• Added support for the css-loader option exportType as css-style-sheet.
• Added entryFilter option to include or exclude entry files when the entry option is the path.
• Added support the CSS Modules for styles imported in JS using the css-loader modules option.
  Required: css-loader >= 7.0.0
  The CSS module rule in the webpack config:

  {
    test: /\.(css)$/,
    use: [
      {
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: '[name]__[local]__[hash:base64:5]',
            exportLocalsConvention: 'camelCase',
          },
        },
      },
    ],
  },
  

  CSS:

  .red {
    color: red;
  }
  .green {
    color: green;
  }
  

  Using in JS:

  // the styles contains CSS class names: { red: 'main__red__us4Tv', green: 'main__green__bcpRp' }
  import styles from './main.css';
  

• Added support for dynamic import of styles

  const loadStyles = () => import('./component.scss');
  loadStyles();
  

• Added (for Pug) experimental (undocumented) syntax to include (using ?include query) compiled CSS directly into style tag to allow keep tag attributes

  style(scope='some')=require('./component.scss?include')
  

  will be generate

  <style scope="some">
    ... CSS ...
  </style>
  

• Added the possibility to add many post processes. Next postprocess receives the result from previous.
  So you can extend this plugin with additional default functionality.

  class MyPlugin extends HtmlBundlerPlugin {
    init(compiler) {
      MyPlugin.option.addProcess('postprocess', (content) => {
        // TODO: modify the generated HTML content
        return content;
      });
    }
  }
  
  module.exports = {
    plugins: [
      new MyPlugin({
        entry: {
          index: './src/index.html',
        },
      }),
    ],
  };
  

  This feature is used in the pug-plugin for pretty formatting generated HTML.
  See an example in the test case.
• Added resolving resource files in an attribute containing the JSON value using the require() function,
  source template:

  <a href="#" data-image='{ "alt":"image", "imgSrc": require("./pic1.png"), "bgImgSrc": require("./pic2.png") }'> ... </a>
  

  generated HTML contains resolved output assets filenames:

  <a href="#" data-image='{ "alt":"image", "imgSrc": "img/pic1.da3e3cc9.png", "bgImgSrc": "img/pic2.e3cc9da3.png" }'> ... </a>
  

Bug Fixes

• Fixed issue when used js dynamic import with magic comments /* webpackPrefetch: true */ and using the plugin option css.inline=true, #88
• Fixed ansi colors for verbose output in some terminals.
• Fixed extraction CSS from styles imported in dynamically imported JS.
• Fixed define the unique instance name for the plugin as HtmlBundlerPlugin instead of Plugin.
• Fixed catching of the error when a peer dependency for a Pug filter is not installed.
• Fixed resolving asset files on windows.
• Fixed avoid recompiling all entry templates after changes of a non-entry partial file, pug-plugin issue.

Cumulative Release v3.5.1 - v3.5.5

Bug Fixes

• Fixed parsing the data passed via query in JSON notation, e.g.: index.ejs?{"title":"Homepage","lang":"en"}.
• Fixed the parsing of the generated HTML, ignore files already resolved via a preprocessor, e.g. pug.
• Fixed the resolving the resource required in pug code and content, also outer tag attributes.
• Fixed the resolving of images generated via responsive-loader when used query parameters with , and & separators.
• Fixed the resolving of the required resources in multiple pages, in Pug templates.
• Fixed when used TS then could not find a declaration file for module 'html-bundler-webpack-plugin'.

Optimisations

• Initialize the Config only once.
• Lazy load the plugin config file.
• Optimize code for other plugins extending from this plugin.

Documentation

The entry option can be as array of entry items:

{
  entry: [
    {
      filename: 'index.html', // output filename in dist/
      import: 'src/views/index.html', // template file
      data: { title: 'Homepage' }, // page specifically variables
    },
    {
      filename: 'news/sport.html',
      import: 'src/views/news/sport/index.html',
      data: { title: 'Sport' },
    },
  ],
}

Features

• Added support for Pug templating engine.
  The pug preprocessor based on the @webdiscus/pug-loader source code and has the same options and features.

Cumulative Release v3.4.7 - v3.4.12

Bug Fixes

• Fixed serialization issue when used the cache.type = 'filesystem'.
• Fixed missing output js files after second run build when used the cache.type = 'filesystem'.
• Fixed error by resolving url() in the CSS file defined in the entry option.
• Fixed save the webmanifest files in the directory defined in the faviconOptions.path option.
• Fixed use the favicons default options for the build-in FaviconsBundlerPlugin when no plugin options.
• Fixed error by resolving url(date:image...) in CSS.
• Fixed if the same CSS file is imported in many js files, then the CSS is extracted for the first issuer only, #68.

Cumulative Release v3.2.0 - v3.4.6

Features

• Added support for Twig templating engine.
• Added support for the template function on the client-side for Eta templating engine.
• Added support for the template function on the client-side for EJS templating engine.

Bug Fixes

• Fixed the pathData.filename is undefined after changes when the js.filename is a function, #66.
• Fixed extraction CSS from complex libs like MUI that leads to an infinity walk by circular dependency, #59
• Fixed an error explaining when used the build-in favicon plugin and the template not included a link tag, #64.
• Fixed watching changes in template function imported in JS, #60.
• Fixed runtime error using template function in JS when external data is not defined, #60.

Features

• Added support for the template function in JS runtime on the client-side in the browser.
  For example:

import personTmpl from './partials/person.ejs';

// render template function with variables in browser
document.getElementById('person').innerHTML = personTmpl({ name: 'Walter White', age: 50});

The template function works with preprocessors: ejs, handlebars, nunjucks.
Note: The eta (default preprocessor) doesn't support the template function in JS on the client-side, use the ejs instead.

• Added CSS extraction from styles used in *.vue files.
  For example, MyComponent.vue:

  <template>
    ...
  </template>
  <script setup>
    ...
  </script>
  <!-- CSS will be extracted from the SCSS file into a separate *.css file -->
  <style src="./style.scss" lang="scss"></style>
  <!-- CSS will be extracted from the style tag into a separate *.css file -->
  <style>
    h1 {
      color: red;
    }
  </style>
  

Bug fixes

• FIxed access to @root variables in Handlebars partial helper inside the each block.

Bug fixes

• Fixed installation error 'Invalid tag name of the favicons package' (introduced in v3.0.0).
• Added the missing plugins directory to package.

🔆 What's New in v3

• Added Hooks & Callbacks. Now you can create own plugin to extend this plugin.
• Added the build-in FaviconsBundlerPlugin to generate and inject favicon tags.

⚠ BREAKING CHANGE (v3.0.0):

Changed arguments and return of the postprocess callback option.

OLD < v3.0.0:

postprocess(content: string, info: TemplateInfo, compilation: webpack.Compilation): string | null;

type TemplateInfo = {
  filename: string | ((pathData: PathData) => string);
  assetFile: string;
  sourceFile: string;
  outputPath: string;
  verbose: boolean | undefined;
};

When return null then the template processing was skipped.

NEW >= v3.0.0 :
Removed unused/useless properties: filename, verbose.
Added properties: name, resource.

postprocess(content: string, info: TemplateInfo, compilation: webpack.Compilation): string | undefined;

type TemplateInfo = {
  name: string; // the entry name
  assetFile: string; // the output asset filename relative to output path
  sourceFile: string;  // the source filename without a query
  resource: string; // the source filename including a query
  outputPath: string; // output path of assetFile
};

When return null or undefined then the content stay unchanged by postprocess and will be procedded in next hooks/callbacks.

Features

• Added beforePreprocessor hook.

• Added beforePreprocessor callback option.

• Added preprocessor hook.

• Added resolveSource hook.

• Added postprocess hook

• Optimized postprocess callback option, moved from renderManifest sync hook to processAssets async hook.

• Added beforeEmit hook.

• Added beforeEmit callback option.

• Added afterEmit hook.

• Added afterEmit callback option.

• Added possibility to create own plugin using the hooks: beforePreprocessor, preprocessor, resolveSource, postprocess, beforeEmit, afterEmit.

• Added the first plugin (plugin for bundler plugin :-) - FaviconsBundlerPlugin to generate and inject favicon tags for many devices.
  For example:

  const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
  const { FaviconsBundlerPlugin } = require('html-bundler-webpack-plugin/plugins');
  
  module.exports = {
    plugins: [
      new HtmlBundlerPlugin({
        entry: {
          index: './src/views/index.html',
        },
      }),
      // add the plugin to extend the functionality of the HtmlBundlerPlugin
      new FaviconsBundlerPlugin({
        faviconOptions: { ... }, // favicons configuration options
      }),
    ],
  };
  

  If you use the favicons-bundler-plugin, you need to install the favicons module.

• Added possibility to load CSS file dynamically in JavaScript.
  For example:

  function loadCSS(file) {
    const style = document.createElement('link');
    style.href = file;
    style.rel = 'stylesheet';
    document.head.appendChild(style);
  }
  
  loadCSS(require('./style.scss?url')); // <= dynamic load the source style file with `url` query
  

• Added js.inline.attributeFilter option to keep some original script tag attributes when JS is inlined.
  For example, keep the id and text/javascript attributes by inlined <script id="my-id">...inlined JS code...</script>:

  new HtmlBundlerPlugin({
    // ...
    js: {
      inline: {
        attributeFilter: ({ attributes, attribute, value }) => {
          if (attribute === 'type' && value === 'text/javascript') return true;
          if (attribute === 'id' && attributes?.type === 'text/javascript') return true;
        },
      },
    },
  }
  

Bug Fixes

• Added the root dir of the module to exports field in the package.json.

Bug fixes

• Fixed an error when used integrity with the root publicPath option, like output.publicPath: '/some/path/'.

Bug fixes

• Fixed an error when used integrity with the option output.publicPath: '/'. Issues: #42, #43

Cumulative Release v2.14.1 - v2.15.0

Features

• Added parsedValue argument as an array of parsed filenames w/o URL query, in the filter() function of the sources.
  The parsedValue is useful to use with the srcset attribute with many image files.

Bug Fixes

• BREAKING CHANGE: Fixed the type of the value argument for srcset attribute, it is now string (was as Array<string>), in the filter() function of the sources.
  Note: for srcset attribute you can use the parsedValue as an array instead of the value, the value contains now an original string.
• Corrected attributes type in the filter() function of the sources loader option.
• Pass correct entry data in the template when the same template used for many pages with different data, in serve mode.
• Removed unused isEntry property from the info argument of the postprocess callback.
  The isEntry property was always true, because template is defined as an entrypoint.

Cumulative Release v2.13.0 - v2.14.0

Features

• Added the integrityHashes hook to allow retrieving the integrity values, e.g., into the separate file.
• Added the beforePreprocessor callback option, called right before the preprocessor.

Features

• Removed support for the webpack-subresource-integrity plugin,
  because it works not optimized, contains Webpack deprecated code
  and the current Release Candidate version not works more without the html-webpack-plugin
  what is the BREAKING CHANGE and it will not works with the html-bundler-webpack-plugin plugin.

• Added support for subresource integrity independent of other plugins.
  It was implemented own very compact, optimized and fast code to generate integrity for link and script tags.

• CHANGED behavior: the integrity option defaults is now false (in v2.11.0 was auto using webpack-subresource-integrity plugin).

• Extended the integrity option values with the object to pass additional hashFunctions option.

Bug Fixes

• Remove comments of node module imported in dynamic imported chunks.
• Fixed correct content hash in the output JS filename when license comment is removed.

Cumulative Release v2.10.0 - v2.11.0

Features

• Added support for the webpack-subresource-integrity plugin to include the subresource integrity hash.
• Added the integrity option to enable/disable the support for webpack-subresource-integrity plugin.
• Added Handlebars helpers assign, partial and block to extend a template layout with blocks.

Bug Fixes

• Avoid generation of empty CSS file when source style is imported in TS file.

Chore

• Added "Extend Handlebars layout with blocks" example View in browser | source
• Added "Auto generate integrity hash for link and script tags" example View in browser | source

Cumulative Release v2.7.0 - v2.9.0

Features

• Added experimental support the Webpack cache.type as filesystem. This is yet an alpha version.
  You can try it, but if that doesn't work, just use the default cache.type as memory.
• Removes the json5 dependency, take only the parser code from this package, remove unused code from it and optimize it for use with the plugin.
• Added watching for changes (add/remove/rename) in handlebars helpers without restarting Webpack.
• Added js.inline.chunk and js.inline.source options to inline only js chunks matching regular expressions.
• Changed the default value of the hotUpdate option to false. This is not breaking change.
  If you already have a js file, this setting should be false as Webpack automatically injects the hot update code into the compiled js file. Enable this option only if you don't have a referenced source file of a script in a html template.

Bug Fixes

• Fixed resolving output asset filenames without the needless index .1, like index.1.js, when used the same base filename for template and js files. For example, if source files with the same base name src/index.html and src/index.js were used, then dist/index.html and dist/index.1.js were created, because the entry name used for compilation must be unique. This case is fixed.
• If the html outputPath is a relative path, it is relative to output.path, not to CWD
• Fixed resolving asset module by 2nd npm start when cache.type is 'filesystem'.

Chore

• Updated the eta to the latest v3.1.0 version.

Bug Fixes

• when the Webpack output.path option is undefined , set the default path as CWD + /dist

Features

• Added the css.chunkFilename option for output filename of non-initial chunk files, e.g., a style file imported in JavaScript.
• Added the hotUpdate option to enable/disable live reload in serve/watch mode. For some use cases you can disable auto injecting the hot-update.js into generating html files. For example, when you use a react-app generated with create-react-app, then this option must be disabled to avoid a react error.

Bug Fixes

• Fixed missing output css file when the same style source file is imported in js and linked in html.

Chore

• Added the "hello world" example.
  
• Added the simple-site example with automatically processing many HTML templates.
  
• Added the Handlebars example.
  

Bug Fixes

• Fixed missing output html file after renaming template file in watch mode when using entry as a path.

Chore

• Added an example using of Bootstrap with Webpack.
  

• Added an example using of Tailwind CSS with Webpack.