v4.17.0

Cumulative Release v4.6.1 - v4.17.0

Features

• Pick up the srcset and sizes attributes for image preload, #149.
• Added integrity attribute for preload tags if integrity option on, #145.
• Added the fixed preload filter:

  type PreloadFilter =
    | RegExp
    | Array<RegExp>
    | { includes?: Array<RegExp>; excludes?: Array<RegExp> }
    | ((asset: { sourceFiles: Array<string>; outputFile: string }) => void | boolean); // <= BRAKING CHANGES compared to v4.14.0 (DEPRECATED)

• Added support for preloading of dynamic imported modules, #138.
• Added support for the ?inline query to load assets as data URL.
• Added support for the ?inline query by importing SVG file in JS as data URL

  import file from './image.svg'; // import according the matched webpack config, defaults as output filename
  import file from './image.svg?inline'; // import as UTF-8 data URL
  import file from './image.svg?inline=utf8'; // import as UTF-8 data URL
  import file from './image.svg?inline=base64'; // import as base64-encoded data URL

• Added the renderStage option to define the stage for rendering output HTML in the processAssets Webpack hook.
• Added support for handlebars helpers in compile mode.
• Rebuilt all entry point templates by serve/watch, after a partial file is modified.
• Added minimized tag in stats output for minimized HTML assets.
• Precompile Handlebars templates with sub partials.

Bug Fixes

• Fixed compilation fails if used the integrity option with the publicPath as an external URL.
• Improve error messages inc. error stack if async processes fail.
• Fixed unpredictably Webpack compilation fails after a random number of runs, #143.
• Improve the handling exceptions in the integrity module, #143.
• Fixed output URL for preloaded resources if publicPath is a URL or root path, #141.
• Fixed allow to define the renderStage option lower than PROCESS_ASSETS_STAGE_SUMMARIZE, #137.
• Fixed incorrect output of preload tag if crossorigin: true, #139.
• Fixed if as=font is used in preload and the crossorigin is not defined, it will be added automatically, because the crossorigin is mandatory for font type.
• Fixed in TypeScript the renderStage option should be optional.
• Set default render stage before the stage used in compression-webpack-plugin to save completely rendered HTML, #134.
• Fixed fail rebuild after changed css file if no html entry defined, #132.
• Resolve webpack alias correctly if it is external URL.
• Fixed if a module build has failed then stop further processing of modules to allow output original error.
• Fixed if template is imported in JS in compile mode and the same template function called with different variables set
  then variables from previous definition must not be cached. This fix is for all template engines. #128.
• Fixed watching changes in files outer the project directory.
• Fixed missing optional dependencies.

v4.5.3

Cumulative Release v4.3.0 - v4.5.3

Features

• Added the preprocessor for Tempura template engine.
• Added the context loader option to resolve assets w/o leading / in a directory outer your project:

  new HtmlBundlerPlugin({
    loaderOptions: {
      context: path.resolve(__dirname, '../other/'),
    },
  }),

• Added the Exception when used splitChunks and occurs the error: Can't resolve a CSS file in template.
• Added support the HMR for styles imported in JavaScript files.
• Added new css.hot option to enable HMR for styles.

Bug Fixes

• Fixed issue when used multiple config and cache filesystem, occurs the error 'PersistentCache is already registered'.
• Fixed correct Exception message when a source CSS file is not found.
• Fixed issue by inline a style when in the tag used single quotes for attribute.
• Fixed issue when used splitChunks.chunks option then this options will be removed and will be displayed a warning.
  This option makes no sense, because we will split only scripts.
• Fixed issue by HMR when CSS contains a comment with back-tick quotes.
• Fixed issue by HMR when CSS contains Tailwind-like style names with backslashes, e.g.: .\32xl\:w-96, .lg\:ml-4.

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.