v4.2.0

Cumulative Release v4.1.2 - v4.2.0

Features

• Added the support for Webpack >= 5.96 in v4.2.0

WARNING

Webpack version 5.96.0 introduces NOT DOCUMENTED BREAKING CHANGES in the classes:

• AssetGenerator
• CodeGenerationResults

This release has been adapted to these breaking changes.

Bug Fixes

• Fixed webpack stats or errors are not displayed when used cache type as filesystem, #115
• Fixed issue file is not resolved after start->stop->start in serve/watch mode when used cache type as filesystem, #114.

v4.1.1

Cumulative Release v4.1.0 - v4.1.1

Features

• Added supports the require() of CommonJS and JSON files in EJS templates:

  <% const data = require('./data.js') %>
  <div>Film: <%= data.title %></div>
  <div>Genre: <%= data.genre %></div>

  or

  <% const data = require('./data.json') %>
  <div>Film: <%= data.title %></div>
  <div>Genre: <%= data.genre %></div>

Bug Fixes

• Fixed when after 2-3 changes in a data file, the dependent entry templates was not recompiled.

v4.0.0

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.

v3.17.4

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->">

v3.12.0

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.

v3.5.5

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' },
    },
  ],
}

v3.5.0

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.

v3.4.12

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.

v3.4.6

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.

v3.1.3

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.