v3.0.1

🔆 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.