html-webpack-plugin 5.5.4 → 5.6.1

package/index.js

@@ -1,34 +1,124 @@
 // @ts-check
-'use strict';
+"use strict";
 
-const promisify = require('util').promisify;
+const promisify = require("util").promisify;
 
-const vm = require('vm');
-const fs = require('fs');
-const _ = require('lodash');
-const path = require('path');
-const { CachedChildCompilation } = require('./lib/cached-child-compiler');
+const vm = require("vm");
+const fs = require("fs");
+const _uniq = require("lodash/uniq");
+const path = require("path");
+const { CachedChildCompilation } = require("./lib/cached-child-compiler");
 
-const { createHtmlTagObject, htmlTagObjectToString, HtmlTagArray } = require('./lib/html-tags');
-const prettyError = require('./lib/errors.js');
-const chunkSorter = require('./lib/chunksorter.js');
-const getHtmlWebpackPluginHooks = require('./lib/hooks.js').getHtmlWebpackPluginHooks;
+const {
+  createHtmlTagObject,
+  htmlTagObjectToString,
+  HtmlTagArray,
+} = require("./lib/html-tags");
+const prettyError = require("./lib/errors.js");
+const chunkSorter = require("./lib/chunksorter.js");
+const { AsyncSeriesWaterfallHook } = require("tapable");
 
 /** @typedef {import("./typings").HtmlTagObject} HtmlTagObject */
 /** @typedef {import("./typings").Options} HtmlWebpackOptions */
 /** @typedef {import("./typings").ProcessedOptions} ProcessedHtmlWebpackOptions */
 /** @typedef {import("./typings").TemplateParameter} TemplateParameter */
 /** @typedef {import("webpack").Compiler} Compiler */
+/** @typedef {import("webpack").Compilation} Compilation */
+/** @typedef {Required<Compilation["outputOptions"]["publicPath"]>} PublicPath */
 /** @typedef {ReturnType<Compiler["getInfrastructureLogger"]>} Logger */
-/** @typedef {import("webpack/lib/Compilation.js")} Compilation */
+/** @typedef {Compilation["entrypoints"] extends Map<string, infer I> ? I : never} Entrypoint */
 /** @typedef {Array<{ name: string, source: import('webpack').sources.Source, info?: import('webpack').AssetInfo }>} PreviousEmittedAssets */
 /** @typedef {{ publicPath: string, js: Array<string>, css: Array<string>, manifest?: string, favicon?: string }} AssetsInformationByGroups */
+/** @typedef {import("./typings").Hooks} HtmlWebpackPluginHooks */
+/**
+ * @type {WeakMap<Compilation, HtmlWebpackPluginHooks>}}
+ */
+const compilationHooksMap = new WeakMap();
 
 class HtmlWebpackPlugin {
+  // The following is the API definition for all available hooks
+  // For the TypeScript definition, see the Hooks type in typings.d.ts
+  /**
+   beforeAssetTagGeneration:
+   AsyncSeriesWaterfallHook<{
+      assets: {
+        publicPath: string,
+        js: Array<string>,
+        css: Array<string>,
+        favicon?: string | undefined,
+        manifest?: string | undefined
+      },
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>,
+   alterAssetTags:
+   AsyncSeriesWaterfallHook<{
+      assetTags: {
+        scripts: Array<HtmlTagObject>,
+        styles: Array<HtmlTagObject>,
+        meta: Array<HtmlTagObject>,
+      },
+      publicPath: string,
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>,
+   alterAssetTagGroups:
+   AsyncSeriesWaterfallHook<{
+      headTags: Array<HtmlTagObject | HtmlTagObject>,
+      bodyTags: Array<HtmlTagObject | HtmlTagObject>,
+      publicPath: string,
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>,
+   afterTemplateExecution:
+   AsyncSeriesWaterfallHook<{
+      html: string,
+      headTags: Array<HtmlTagObject | HtmlTagObject>,
+      bodyTags: Array<HtmlTagObject | HtmlTagObject>,
+      outputName: string,
+      plugin: HtmlWebpackPlugin,
+    }>,
+   beforeEmit:
+   AsyncSeriesWaterfallHook<{
+      html: string,
+      outputName: string,
+      plugin: HtmlWebpackPlugin,
+    }>,
+   afterEmit:
+   AsyncSeriesWaterfallHook<{
+      outputName: string,
+      plugin: HtmlWebpackPlugin
+    }>
+   */
+
+  /**
+   * Returns all public hooks of the html webpack plugin for the given compilation
+   *
+   * @param {Compilation} compilation
+   * @returns {HtmlWebpackPluginHooks}
+   */
+  static getCompilationHooks(compilation) {
+    let hooks = compilationHooksMap.get(compilation);
+
+    if (!hooks) {
+      hooks = {
+        beforeAssetTagGeneration: new AsyncSeriesWaterfallHook(["pluginArgs"]),
+        alterAssetTags: new AsyncSeriesWaterfallHook(["pluginArgs"]),
+        alterAssetTagGroups: new AsyncSeriesWaterfallHook(["pluginArgs"]),
+        afterTemplateExecution: new AsyncSeriesWaterfallHook(["pluginArgs"]),
+        beforeEmit: new AsyncSeriesWaterfallHook(["pluginArgs"]),
+        afterEmit: new AsyncSeriesWaterfallHook(["pluginArgs"]),
+      };
+      compilationHooksMap.set(compilation, hooks);
+    }
+
+    return hooks;
+  }
+
   /**
    * @param {HtmlWebpackOptions} [options]
    */
-  constructor (options) {
+  constructor(options) {
     /** @type {HtmlWebpackOptions} */
     // TODO remove me in the next major release
     this.userOptions = options || {};
@@ -37,26 +127,29 @@ class HtmlWebpackPlugin {
     // Default options
     /** @type {ProcessedHtmlWebpackOptions} */
     const defaultOptions = {
-      template: 'auto',
+      template: "auto",
       templateContent: false,
       templateParameters: templateParametersGenerator,
-      filename: 'index.html',
-      publicPath: this.userOptions.publicPath === undefined ? 'auto' : this.userOptions.publicPath,
+      filename: "index.html",
+      publicPath:
+        this.userOptions.publicPath === undefined
+          ? "auto"
+          : this.userOptions.publicPath,
       hash: false,
-      inject: this.userOptions.scriptLoading === 'blocking' ? 'body' : 'head',
-      scriptLoading: 'defer',
+      inject: this.userOptions.scriptLoading === "blocking" ? "body" : "head",
+      scriptLoading: "defer",
       compile: true,
       favicon: false,
-      minify: 'auto',
+      minify: "auto",
       cache: true,
       showErrors: true,
-      chunks: 'all',
+      chunks: "all",
       excludeChunks: [],
-      chunksSortMode: 'auto',
+      chunksSortMode: "auto",
       meta: {},
       base: false,
-      title: 'Webpack App',
-      xhtml: false
+      title: "Webpack App",
+      xhtml: false,
     };
 
     /** @type {ProcessedHtmlWebpackOptions} */
@@ -68,113 +161,152 @@ class HtmlWebpackPlugin {
    * @param {Compiler} compiler
    * @returns {void}
    */
-  apply (compiler) {
-    this.logger = compiler.getInfrastructureLogger('HtmlWebpackPlugin');
+  apply(compiler) {
+    this.logger = compiler.getInfrastructureLogger("HtmlWebpackPlugin");
 
-    // Wait for configuration preset plugions to apply all configure webpack defaults
-    compiler.hooks.initialize.tap('HtmlWebpackPlugin', () => {
-      const options = this.options;
+    const options = this.options;
 
-      options.template = this.getTemplatePath(this.options.template, compiler.context);
+    options.template = this.getTemplatePath(
+      this.options.template,
+      compiler.context,
+    );
 
-      // Assert correct option spelling
-      if (options.scriptLoading !== 'defer' && options.scriptLoading !== 'blocking' && options.scriptLoading !== 'module') {
-        /** @type {Logger} */
-        (this.logger).error('The "scriptLoading" option need to be set to "defer", "blocking" or "module"');
-      }
+    // Assert correct option spelling
+    if (
+      options.scriptLoading !== "defer" &&
+      options.scriptLoading !== "blocking" &&
+      options.scriptLoading !== "module" &&
+      options.scriptLoading !== "systemjs-module"
+    ) {
+      /** @type {Logger} */
+      (this.logger).error(
+        'The "scriptLoading" option need to be set to "defer", "blocking" or "module" or "systemjs-module"',
+      );
+    }
 
-      if (options.inject !== true && options.inject !== false && options.inject !== 'head' && options.inject !== 'body') {
-        /** @type {Logger} */
-        (this.logger).error('The `inject` option needs to be set to true, false, "head" or "body');
-      }
+    if (
+      options.inject !== true &&
+      options.inject !== false &&
+      options.inject !== "head" &&
+      options.inject !== "body"
+    ) {
+      /** @type {Logger} */
+      (this.logger).error(
+        'The `inject` option needs to be set to true, false, "head" or "body',
+      );
+    }
 
-      if (
-        this.options.templateParameters !== false &&
-        typeof this.options.templateParameters !== 'function' &&
-        typeof this.options.templateParameters !== 'object'
-      ) {
-        /** @type {Logger} */
-        (this.logger).error('The `templateParameters` has to be either a function or an object or false');
-      }
+    if (
+      this.options.templateParameters !== false &&
+      typeof this.options.templateParameters !== "function" &&
+      typeof this.options.templateParameters !== "object"
+    ) {
+      /** @type {Logger} */
+      (this.logger).error(
+        "The `templateParameters` has to be either a function or an object or false",
+      );
+    }
 
-      // Default metaOptions if no template is provided
-      if (!this.userOptions.template && options.templateContent === false && options.meta) {
-        options.meta = Object.assign(
-          {},
-          options.meta,
-          {
-            // TODO remove in the next major release
-            // From https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
-            viewport: 'width=device-width, initial-scale=1'
-          },
-          this.userOptions.meta
-        );
-      }
+    // Default metaOptions if no template is provided
+    if (
+      !this.userOptions.template &&
+      options.templateContent === false &&
+      options.meta
+    ) {
+      options.meta = Object.assign(
+        {},
+        options.meta,
+        {
+          // TODO remove in the next major release
+          // From https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
+          viewport: "width=device-width, initial-scale=1",
+        },
+        this.userOptions.meta,
+      );
+    }
 
-      // entryName to fileName conversion function
-      const userOptionFilename = this.userOptions.filename || this.options.filename;
-      const filenameFunction = typeof userOptionFilename === 'function'
+    // entryName to fileName conversion function
+    const userOptionFilename =
+      this.userOptions.filename || this.options.filename;
+    const filenameFunction =
+      typeof userOptionFilename === "function"
         ? userOptionFilename
-        // Replace '[name]' with entry name
-        : (entryName) => userOptionFilename.replace(/\[name\]/g, entryName);
-
-      /** output filenames for the given entry names */
-      const entryNames = Object.keys(compiler.options.entry);
-      const outputFileNames = new Set((entryNames.length ? entryNames : ['main']).map(filenameFunction));
-
-      // Hook all options into the webpack compiler
-      outputFileNames.forEach((outputFileName) => {
-        // Instance variables to keep caching information for multiple builds
-        const assetJson = { value: undefined };
-        /**
-         * store the previous generated asset to emit them even if the content did not change
-         * to support watch mode for third party plugins like the clean-webpack-plugin or the compression plugin
-         * @type {PreviousEmittedAssets}
-         */
-        const previousEmittedAssets = [];
+        : // Replace '[name]' with entry name
+          (entryName) => userOptionFilename.replace(/\[name\]/g, entryName);
 
-        // Inject child compiler plugin
-        const childCompilerPlugin = new CachedChildCompilation(compiler);
+    /** output filenames for the given entry names */
+    const entryNames = Object.keys(compiler.options.entry);
+    const outputFileNames = new Set(
+      (entryNames.length ? entryNames : ["main"]).map(filenameFunction),
+    );
 
-        if (!this.options.templateContent) {
-          childCompilerPlugin.addEntry(this.options.template);
-        }
+    // Hook all options into the webpack compiler
+    outputFileNames.forEach((outputFileName) => {
+      // Instance variables to keep caching information for multiple builds
+      const assetJson = { value: undefined };
+      /**
+       * store the previous generated asset to emit them even if the content did not change
+       * to support watch mode for third party plugins like the clean-webpack-plugin or the compression plugin
+       * @type {PreviousEmittedAssets}
+       */
+      const previousEmittedAssets = [];
+
+      // Inject child compiler plugin
+      const childCompilerPlugin = new CachedChildCompilation(compiler);
+
+      if (!this.options.templateContent) {
+        childCompilerPlugin.addEntry(this.options.template);
+      }
 
-        // convert absolute filename into relative so that webpack can
-        // generate it at correct location
-        let filename = outputFileName;
+      // convert absolute filename into relative so that webpack can
+      // generate it at correct location
+      let filename = outputFileName;
 
-        if (path.resolve(filename) === path.normalize(filename)) {
-          const outputPath = /** @type {string} - Once initialized the path is always a string */(compiler.options.output.path);
+      if (path.resolve(filename) === path.normalize(filename)) {
+        const outputPath =
+          /** @type {string} - Once initialized the path is always a string */ (
+            compiler.options.output.path
+          );
 
-          filename = path.relative(outputPath, filename);
-        }
+        filename = path.relative(outputPath, filename);
+      }
 
-        compiler.hooks.thisCompilation.tap('HtmlWebpackPlugin',
-          /**
-           * Hook into the webpack compilation
-           * @param {Compilation} compilation
-           */
-          (compilation) => {
-            compilation.hooks.processAssets.tapAsync(
-              {
-                name: 'HtmlWebpackPlugin',
-                stage:
+      compiler.hooks.thisCompilation.tap(
+        "HtmlWebpackPlugin",
+        /**
+         * Hook into the webpack compilation
+         * @param {Compilation} compilation
+         */
+        (compilation) => {
+          compilation.hooks.processAssets.tapAsync(
+            {
+              name: "HtmlWebpackPlugin",
+              stage:
                 /**
                  * Generate the html after minification and dev tooling is done
                  */
-                compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE
-              },
-              /**
-               * Hook into the process assets hook
-               * @param {any} _
-               * @param {(err?: Error) => void} callback
-               */
-              (_, callback) => {
-                this.generateHTML(compiler, compilation, filename, childCompilerPlugin, previousEmittedAssets, assetJson, callback);
-              });
-          });
-      });
+                compiler.webpack.Compilation
+                  .PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE,
+            },
+            /**
+             * Hook into the process assets hook
+             * @param {any} _
+             * @param {(err?: Error) => void} callback
+             */
+            (_, callback) => {
+              this.generateHTML(
+                compiler,
+                compilation,
+                filename,
+                childCompilerPlugin,
+                previousEmittedAssets,
+                assetJson,
+                callback,
+              );
+            },
+          );
+        },
+      );
     });
   }
 
@@ -185,23 +317,28 @@ class HtmlWebpackPlugin {
    * @param {string} template The path to the template e.g. './index.html'
    * @param {string} context The webpack base resolution path for relative paths e.g. process.cwd()
    */
-  getTemplatePath (template, context) {
-    if (template === 'auto') {
-      template = path.resolve(context, 'src/index.ejs');
+  getTemplatePath(template, context) {
+    if (template === "auto") {
+      template = path.resolve(context, "src/index.ejs");
       if (!fs.existsSync(template)) {
-        template = path.join(__dirname, 'default_index.ejs');
+        template = path.join(__dirname, "default_index.ejs");
       }
     }
 
     // If the template doesn't use a loader use the lodash template loader
-    if (template.indexOf('!') === -1) {
-      template = require.resolve('./lib/loader.js') + '!' + path.resolve(context, template);
+    if (template.indexOf("!") === -1) {
+      template =
+        require.resolve("./lib/loader.js") +
+        "!" +
+        path.resolve(context, template);
     }
 
     // Resolve template path
     return template.replace(
       /([!])([^/\\][^!?]+|[^/\\!?])($|\?[^!?\n]+$)/,
-      (match, prefix, filepath, postfix) => prefix + path.resolve(filepath) + postfix);
+      (match, prefix, filepath, postfix) =>
+        prefix + path.resolve(filepath) + postfix,
+    );
   }
 
   /**
@@ -212,15 +349,21 @@ class HtmlWebpackPlugin {
    * @param {string[]|'all'} includedChunks
    * @param {string[]} excludedChunks
    */
-  filterEntryChunks (chunks, includedChunks, excludedChunks) {
-    return chunks.filter(chunkName => {
+  filterEntryChunks(chunks, includedChunks, excludedChunks) {
+    return chunks.filter((chunkName) => {
       // Skip if the chunks should be filtered and the given chunk was not added explicity
-      if (Array.isArray(includedChunks) && includedChunks.indexOf(chunkName) === -1) {
+      if (
+        Array.isArray(includedChunks) &&
+        includedChunks.indexOf(chunkName) === -1
+      ) {
         return false;
       }
 
       // Skip if the chunks should be filtered and the given chunk was excluded explicity
-      if (Array.isArray(excludedChunks) && excludedChunks.indexOf(chunkName) !== -1) {
+      if (
+        Array.isArray(excludedChunks) &&
+        excludedChunks.indexOf(chunkName) !== -1
+      ) {
         return false;
       }
 
@@ -237,13 +380,13 @@ class HtmlWebpackPlugin {
    * @param {string|((entryNameA: string, entryNameB: string) => number)} sortMode
    * @param {Compilation} compilation
    */
-  sortEntryChunks (entryNames, sortMode, compilation) {
+  sortEntryChunks(entryNames, sortMode, compilation) {
     // Custom function
-    if (typeof sortMode === 'function') {
+    if (typeof sortMode === "function") {
       return entryNames.sort(sortMode);
     }
     // Check if the given sort mode is a valid chunkSorter sort mode
-    if (typeof chunkSorter[sortMode] !== 'undefined') {
+    if (typeof chunkSorter[sortMode] !== "undefined") {
       return chunkSorter[sortMode](entryNames, compilation, this.options);
     }
     throw new Error('"' + sortMode + '" is not a valid chunk sort mode');
@@ -271,17 +414,18 @@ class HtmlWebpackPlugin {
    * @private
    * @param {string} filePath
    */
-  urlencodePath (filePath) {
+  urlencodePath(filePath) {
     // People use the filepath in quite unexpected ways.
     // Try to extract the first querystring of the url:
     //
     // some+path/demo.html?value=abc?def
     //
-    const queryStringStart = filePath.indexOf('?');
-    const urlPath = queryStringStart === -1 ? filePath : filePath.substr(0, queryStringStart);
+    const queryStringStart = filePath.indexOf("?");
+    const urlPath =
+      queryStringStart === -1 ? filePath : filePath.substr(0, queryStringStart);
     const queryString = filePath.substr(urlPath.length);
     // Encode all parts except '/' which are not part of the querystring:
-    const encodedUrlPath = urlPath.split('/').map(encodeURIComponent).join('/');
+    const encodedUrlPath = urlPath.split("/").map(encodeURIComponent).join("/");
     return encodedUrlPath + queryString;
   }
 
@@ -290,14 +434,15 @@ class HtmlWebpackPlugin {
    * E.g. http://localhost:8080/ -> http://localhost:8080/?50c9096ba6183fd728eeb065a26ec175
    *
    * @private
-   * @param {string} url
+   * @param {string | undefined} url
    * @param {string} hash
    */
-  appendHash (url, hash) {
+  appendHash(url, hash) {
     if (!url) {
       return url;
     }
-    return url + (url.indexOf('?') === -1 ? '?' : '&') + hash;
+
+    return url + (url.indexOf("?") === -1 ? "?" : "&") + hash;
   }
 
   /**
@@ -310,30 +455,42 @@ class HtmlWebpackPlugin {
    * @param {string | 'auto'} customPublicPath
    * @returns {string}
    */
-  getPublicPath (compilation, filename, customPublicPath) {
+  getPublicPath(compilation, filename, customPublicPath) {
     /**
      * @type {string} the configured public path to the asset root
      * if a path publicPath is set in the current webpack config use it otherwise
      * fallback to a relative path
      */
-    const webpackPublicPath = compilation.getAssetPath(compilation.outputOptions.publicPath, { hash: compilation.hash });
+    const webpackPublicPath = compilation.getAssetPath(
+      /** @type {NonNullable<Compilation["outputOptions"]["publicPath"]>} */ (
+        compilation.outputOptions.publicPath
+      ),
+      { hash: compilation.hash },
+    );
     // Webpack 5 introduced "auto" as default value
-    const isPublicPathDefined = webpackPublicPath !== 'auto';
+    const isPublicPathDefined = webpackPublicPath !== "auto";
 
     let publicPath =
-      // If the html-webpack-plugin options contain a custom public path uset it
-      customPublicPath !== 'auto'
+      // If the html-webpack-plugin options contain a custom public path unset it
+      customPublicPath !== "auto"
         ? customPublicPath
-        : (isPublicPathDefined
-          // If a hard coded public path exists use it
-          ? webpackPublicPath
-          // If no public path was set get a relative url path
-          : path.relative(path.resolve(compilation.options.output.path, path.dirname(filename)), compilation.options.output.path)
-            .split(path.sep).join('/')
-        );
-
-    if (publicPath.length && publicPath.substr(-1, 1) !== '/') {
-      publicPath += '/';
+        : isPublicPathDefined
+          ? // If a hard coded public path exists use it
+            webpackPublicPath
+          : // If no public path was set get a relative url path
+            path
+              .relative(
+                path.resolve(
+                  /** @type {string} */ (compilation.options.output.path),
+                  path.dirname(filename),
+                ),
+                /** @type {string} */ (compilation.options.output.path),
+              )
+              .split(path.sep)
+              .join("/");
+
+    if (publicPath.length && publicPath.substr(-1, 1) !== "/") {
+      publicPath += "/";
     }
 
     return publicPath;
@@ -348,9 +505,13 @@ class HtmlWebpackPlugin {
    * @param {string[]} entryNames
    * @returns {AssetsInformationByGroups}
    */
-  getAssetsInformationByGroups (compilation, outputName, entryNames) {
+  getAssetsInformationByGroups(compilation, outputName, entryNames) {
     /** The public path used inside the html file */
-    const publicPath = this.getPublicPath(compilation, outputName, this.options.publicPath);
+    const publicPath = this.getPublicPath(
+      compilation,
+      outputName,
+      this.options.publicPath,
+    );
     /**
      * @type {AssetsInformationByGroups}
      */
@@ -362,14 +523,19 @@ class HtmlWebpackPlugin {
       // Will contain all css files
       css: [],
       // Will contain the html5 appcache manifest files if it exists
-      manifest: Object.keys(compilation.assets).find(assetFile => path.extname(assetFile) === '.appcache'),
+      manifest: Object.keys(compilation.assets).find(
+        (assetFile) => path.extname(assetFile) === ".appcache",
+      ),
       // Favicon
-      favicon: undefined
+      favicon: undefined,
     };
 
     // Append a hash for cache busting
     if (this.options.hash && assets.manifest) {
-      assets.manifest = this.appendHash(assets.manifest, /** @type {string} */ (compilation.hash));
+      assets.manifest = this.appendHash(
+        assets.manifest,
+        /** @type {string} */ (compilation.hash),
+      );
     }
 
     // Extract paths to .js, .mjs and .css files from the current compilation
@@ -379,7 +545,9 @@ class HtmlWebpackPlugin {
     for (let i = 0; i < entryNames.length; i++) {
       const entryName = entryNames[i];
       /** entryPointUnfilteredFiles - also includes hot module update files */
-      const entryPointUnfilteredFiles = compilation.entrypoints.get(entryName).getFiles();
+      const entryPointUnfilteredFiles = /** @type {Entrypoint} */ (
+        compilation.entrypoints.get(entryName)
+      ).getFiles();
       const entryPointFiles = entryPointUnfilteredFiles.filter((chunkFile) => {
         const asset = compilation.getAsset(chunkFile);
 
@@ -390,21 +558,28 @@ class HtmlWebpackPlugin {
         // Prevent hot-module files from being included:
         const assetMetaInformation = asset.info || {};
 
-        return !(assetMetaInformation.hotModuleReplacement || assetMetaInformation.development);
+        return !(
+          assetMetaInformation.hotModuleReplacement ||
+          assetMetaInformation.development
+        );
       });
       // Prepend the publicPath and append the hash depending on the
       // webpack.output.publicPath and hashOptions
       // E.g. bundle.js -> /bundle.js?hash
-      const entryPointPublicPaths = entryPointFiles
-        .map(chunkFile => {
-          const entryPointPublicPath = publicPath + this.urlencodePath(chunkFile);
-          return this.options.hash
-            ? this.appendHash(entryPointPublicPath, compilation.hash)
-            : entryPointPublicPath;
-        });
+      const entryPointPublicPaths = entryPointFiles.map((chunkFile) => {
+        const entryPointPublicPath = publicPath + this.urlencodePath(chunkFile);
+        return this.options.hash
+          ? this.appendHash(
+              entryPointPublicPath,
+              /** @type {string} */ (compilation.hash),
+            )
+          : entryPointPublicPath;
+      });
 
       entryPointPublicPaths.forEach((entryPointPublicPath) => {
-        const extMatch = extensionRegexp.exec(entryPointPublicPath);
+        const extMatch = extensionRegexp.exec(
+          /** @type {string} */ (entryPointPublicPath),
+        );
 
         // Skip if the public path is not a .css, .mjs or .js file
         if (!extMatch) {
@@ -420,7 +595,7 @@ class HtmlWebpackPlugin {
         entryPointPublicPathMap[entryPointPublicPath] = true;
 
         // ext will contain .js or .css, because .mjs recognizes as .js
-        const ext = extMatch[1] === 'mjs' ? 'js' : extMatch[1];
+        const ext = extMatch[1] === "mjs" ? "js" : extMatch[1];
 
         assets[ext].push(entryPointPublicPath);
       });
@@ -441,18 +616,22 @@ class HtmlWebpackPlugin {
    * @param {string} templateFilename
    * @returns {Promise<string | (() => string | Promise<string>)>}
    */
-  evaluateCompilationResult (source, publicPath, templateFilename) {
+  evaluateCompilationResult(source, publicPath, templateFilename) {
     if (!source) {
-      return Promise.reject(new Error('The child compilation didn\'t provide a result'));
+      return Promise.reject(
+        new Error("The child compilation didn't provide a result"),
+      );
     }
 
     // The LibraryTemplatePlugin stores the template result in a local variable.
     // By adding it to the end the value gets extracted during evaluation
-    if (source.indexOf('HTML_WEBPACK_PLUGIN_RESULT') >= 0) {
-      source += ';\nHTML_WEBPACK_PLUGIN_RESULT';
+    if (source.indexOf("HTML_WEBPACK_PLUGIN_RESULT") >= 0) {
+      source += ";\nHTML_WEBPACK_PLUGIN_RESULT";
     }
 
-    const templateWithoutLoaders = templateFilename.replace(/^.+!/, '').replace(/\?.+$/, '');
+    const templateWithoutLoaders = templateFilename
+      .replace(/^.+!/, "")
+      .replace(/\?.+$/, "");
     const vmContext = vm.createContext({
       ...global,
       HTML_WEBPACK_PLUGIN: true,
@@ -507,10 +686,12 @@ class HtmlWebpackPlugin {
       WebAssembly: global.WebAssembly,
       WritableStream: global.WritableStream,
       WritableStreamDefaultController: global.WritableStreamDefaultController,
-      WritableStreamDefaultWriter: global.WritableStreamDefaultWriter
+      WritableStreamDefaultWriter: global.WritableStreamDefaultWriter,
     });
 
-    const vmScript = new vm.Script(source, { filename: templateWithoutLoaders });
+    const vmScript = new vm.Script(source, {
+      filename: templateWithoutLoaders,
+    });
 
     // Evaluate code and cast to string
     let newSource;
@@ -521,13 +702,21 @@ class HtmlWebpackPlugin {
       return Promise.reject(e);
     }
 
-    if (typeof newSource === 'object' && newSource.__esModule && newSource.default) {
+    if (
+      typeof newSource === "object" &&
+      newSource.__esModule &&
+      newSource.default
+    ) {
       newSource = newSource.default;
     }
 
-    return typeof newSource === 'string' || typeof newSource === 'function'
+    return typeof newSource === "string" || typeof newSource === "function"
       ? Promise.resolve(newSource)
-      : Promise.reject(new Error('The loader "' + templateWithoutLoaders + '" didn\'t return html.'));
+      : Promise.reject(
+          new Error(
+            'The loader "' + templateWithoutLoaders + "\" didn't return html.",
+          ),
+        );
   }
 
   /**
@@ -537,15 +726,17 @@ class HtmlWebpackPlugin {
    * @param {Array<HtmlTagObject>} assetTagGroup
    * @returns {Array<HtmlTagObject>}
    */
-  prepareAssetTagGroupForRendering (assetTagGroup) {
+  prepareAssetTagGroupForRendering(assetTagGroup) {
     const xhtml = this.options.xhtml;
-    return HtmlTagArray.from(assetTagGroup.map((assetTag) => {
-      const copiedAssetTag = Object.assign({}, assetTag);
-      copiedAssetTag.toString = function () {
-        return htmlTagObjectToString(this, xhtml);
-      };
-      return copiedAssetTag;
-    }));
+    return HtmlTagArray.from(
+      assetTagGroup.map((assetTag) => {
+        const copiedAssetTag = Object.assign({}, assetTag);
+        copiedAssetTag.toString = function () {
+          return htmlTagObjectToString(this, xhtml);
+        };
+        return copiedAssetTag;
+      }),
+    );
   }
 
   /**
@@ -560,32 +751,50 @@ class HtmlWebpackPlugin {
      }} assetTags
    * @returns {Promise<{[key: any]: any}>}
    */
-  getTemplateParameters (compilation, assetsInformationByGroups, assetTags) {
+  getTemplateParameters(compilation, assetsInformationByGroups, assetTags) {
     const templateParameters = this.options.templateParameters;
 
     if (templateParameters === false) {
       return Promise.resolve({});
     }
 
-    if (typeof templateParameters !== 'function' && typeof templateParameters !== 'object') {
-      throw new Error('templateParameters has to be either a function or an object');
+    if (
+      typeof templateParameters !== "function" &&
+      typeof templateParameters !== "object"
+    ) {
+      throw new Error(
+        "templateParameters has to be either a function or an object",
+      );
     }
 
-    const templateParameterFunction = typeof templateParameters === 'function'
-      // A custom function can overwrite the entire template parameter preparation
-      ? templateParameters
-      // If the template parameters is an object merge it with the default values
-      : (compilation, assetsInformationByGroups, assetTags, options) => Object.assign({},
-        templateParametersGenerator(compilation, assetsInformationByGroups, assetTags, options),
-        templateParameters
-      );
+    const templateParameterFunction =
+      typeof templateParameters === "function"
+        ? // A custom function can overwrite the entire template parameter preparation
+          templateParameters
+        : // If the template parameters is an object merge it with the default values
+          (compilation, assetsInformationByGroups, assetTags, options) =>
+            Object.assign(
+              {},
+              templateParametersGenerator(
+                compilation,
+                assetsInformationByGroups,
+                assetTags,
+                options,
+              ),
+              templateParameters,
+            );
     const preparedAssetTags = {
       headTags: this.prepareAssetTagGroupForRendering(assetTags.headTags),
-      bodyTags: this.prepareAssetTagGroupForRendering(assetTags.bodyTags)
+      bodyTags: this.prepareAssetTagGroupForRendering(assetTags.bodyTags),
     };
-    return Promise
-      .resolve()
-      .then(() => templateParameterFunction(compilation, assetsInformationByGroups, preparedAssetTags, this.options));
+    return Promise.resolve().then(() =>
+      templateParameterFunction(
+        compilation,
+        assetsInformationByGroups,
+        preparedAssetTags,
+        this.options,
+      ),
+    );
   }
 
   /**
@@ -601,9 +810,18 @@ class HtmlWebpackPlugin {
    * @param {Compilation} compilation
    * @returns Promise<string>
    */
-  executeTemplate (templateFunction, assetsInformationByGroups, assetTags, compilation) {
+  executeTemplate(
+    templateFunction,
+    assetsInformationByGroups,
+    assetTags,
+    compilation,
+  ) {
     // Template processing
-    const templateParamsPromise = this.getTemplateParameters(compilation, assetsInformationByGroups, assetTags);
+    const templateParamsPromise = this.getTemplateParameters(
+      compilation,
+      assetsInformationByGroups,
+      assetTags,
+    );
 
     return templateParamsPromise.then((templateParams) => {
       try {
@@ -611,7 +829,8 @@ class HtmlWebpackPlugin {
         // If html is a string turn it into a promise
         return templateFunction(templateParams);
       } catch (e) {
-        compilation.errors.push(new Error('Template execution failed: ' + e));
+        // @ts-ignore
+        compilation.errors.push(new Error("Template execution failed: " + e));
         return Promise.reject(e);
       }
     });
@@ -627,11 +846,20 @@ class HtmlWebpackPlugin {
    * @param {{headTags: HtmlTagObject[], bodyTags: HtmlTagObject[]}} assetTags The asset tags to inject
    * @returns {Promise<string>}
    */
-  postProcessHtml (compiler, originalHtml, assetsInformationByGroups, assetTags) {
+  postProcessHtml(
+    compiler,
+    originalHtml,
+    assetsInformationByGroups,
+    assetTags,
+  ) {
     let html = originalHtml;
 
-    if (typeof html !== 'string') {
-      return Promise.reject(new Error('Expected html to be a string but got ' + JSON.stringify(html)));
+    if (typeof html !== "string") {
+      return Promise.reject(
+        new Error(
+          "Expected html to be a string but got " + JSON.stringify(html),
+        ),
+      );
     }
 
     if (this.options.inject) {
@@ -639,22 +867,33 @@ class HtmlWebpackPlugin {
       const headRegExp = /(<\/head\s*>)/i;
       const bodyRegExp = /(<\/body\s*>)/i;
       const metaViewportRegExp = /<meta[^>]+name=["']viewport["'][^>]*>/i;
-      const body = assetTags.bodyTags.map((assetTagObject) => htmlTagObjectToString(assetTagObject, this.options.xhtml));
-      const head = assetTags.headTags.filter((item) => {
-        if (item.tagName === 'meta' && item.attributes && item.attributes.name === 'viewport' && metaViewportRegExp.test(html)) {
-          return false;
-        }
+      const body = assetTags.bodyTags.map((assetTagObject) =>
+        htmlTagObjectToString(assetTagObject, this.options.xhtml),
+      );
+      const head = assetTags.headTags
+        .filter((item) => {
+          if (
+            item.tagName === "meta" &&
+            item.attributes &&
+            item.attributes.name === "viewport" &&
+            metaViewportRegExp.test(html)
+          ) {
+            return false;
+          }
 
-        return true;
-      }).map((assetTagObject) => htmlTagObjectToString(assetTagObject, this.options.xhtml));
+          return true;
+        })
+        .map((assetTagObject) =>
+          htmlTagObjectToString(assetTagObject, this.options.xhtml),
+        );
 
       if (body.length) {
         if (bodyRegExp.test(html)) {
           // Append assets to body element
-          html = html.replace(bodyRegExp, match => body.join('') + match);
+          html = html.replace(bodyRegExp, (match) => body.join("") + match);
         } else {
           // Append scripts to the end of the file if no <body> element exists:
-          html += body.join('');
+          html += body.join("");
         }
       }
 
@@ -662,14 +901,14 @@ class HtmlWebpackPlugin {
         // Create a head tag if none exists
         if (!headRegExp.test(html)) {
           if (!htmlRegExp.test(html)) {
-            html = '<head></head>' + html;
+            html = "<head></head>" + html;
           } else {
-            html = html.replace(htmlRegExp, match => match + '<head></head>');
+            html = html.replace(htmlRegExp, (match) => match + "<head></head>");
           }
         }
 
         // Append assets to head element
-        html = html.replace(headRegExp, match => head.join('') + match);
+        html = html.replace(headRegExp, (match) => head.join("") + match);
       }
 
       // Inject manifest into the opening html tag
@@ -679,7 +918,13 @@ class HtmlWebpackPlugin {
           if (/\smanifest\s*=/.test(match)) {
             return match;
           }
-          return start + ' manifest="' + assetsInformationByGroups.manifest + '"' + end;
+          return (
+            start +
+            ' manifest="' +
+            assetsInformationByGroups.manifest +
+            '"' +
+            end
+          );
         });
       }
     }
@@ -687,41 +932,48 @@ class HtmlWebpackPlugin {
     // TODO avoid this logic and use https://github.com/webpack-contrib/html-minimizer-webpack-plugin under the hood in the next major version
     // Check if webpack is running in production mode
     // @see https://github.com/webpack/webpack/blob/3366421f1784c449f415cda5930a8e445086f688/lib/WebpackOptionsDefaulter.js#L12-L14
-    const isProductionLikeMode = compiler.options.mode === 'production' || !compiler.options.mode;
-    const needMinify = this.options.minify === true || typeof this.options.minify === 'object' || (this.options.minify === 'auto' && isProductionLikeMode);
+    const isProductionLikeMode =
+      compiler.options.mode === "production" || !compiler.options.mode;
+    const needMinify =
+      this.options.minify === true ||
+      typeof this.options.minify === "object" ||
+      (this.options.minify === "auto" && isProductionLikeMode);
 
     if (!needMinify) {
       return Promise.resolve(html);
     }
 
-    const minifyOptions = typeof this.options.minify === 'object'
-      ? this.options.minify
-      : {
-        // https://www.npmjs.com/package/html-minifier-terser#options-quick-reference
-        collapseWhitespace: true,
-        keepClosingSlash: true,
-        removeComments: true,
-        removeRedundantAttributes: true,
-        removeScriptTypeAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        useShortDoctype: true
-      };
+    const minifyOptions =
+      typeof this.options.minify === "object"
+        ? this.options.minify
+        : {
+            // https://www.npmjs.com/package/html-minifier-terser#options-quick-reference
+            collapseWhitespace: true,
+            keepClosingSlash: true,
+            removeComments: true,
+            removeRedundantAttributes: true,
+            removeScriptTypeAttributes: true,
+            removeStyleLinkTypeAttributes: true,
+            useShortDoctype: true,
+          };
 
     try {
-      html = require('html-minifier-terser').minify(html, minifyOptions);
+      html = require("html-minifier-terser").minify(html, minifyOptions);
     } catch (e) {
-      const isParseError = String(e.message).indexOf('Parse Error') === 0;
+      const isParseError = String(e.message).indexOf("Parse Error") === 0;
 
       if (isParseError) {
-        e.message = 'html-webpack-plugin could not minify the generated output.\n' +
-          'In production mode the html minifcation is enabled by default.\n' +
-          'If you are not generating a valid html output please disable it manually.\n' +
-          'You can do so by adding the following setting to your HtmlWebpackPlugin config:\n|\n|' +
-          '    minify: false\n|\n' +
-          'See https://github.com/jantimon/html-webpack-plugin#options for details.\n\n' +
-          'For parser dedicated bugs please create an issue here:\n' +
-          'https://danielruf.github.io/html-minifier-terser/' +
-          '\n' + e.message;
+        e.message =
+          "html-webpack-plugin could not minify the generated output.\n" +
+          "In production mode the html minification is enabled by default.\n" +
+          "If you are not generating a valid html output please disable it manually.\n" +
+          "You can do so by adding the following setting to your HtmlWebpackPlugin config:\n|\n|" +
+          "    minify: false\n|\n" +
+          "See https://github.com/jantimon/html-webpack-plugin#options for details.\n\n" +
+          "For parser dedicated bugs please create an issue here:\n" +
+          "https://danielruf.github.io/html-minifier-terser/" +
+          "\n" +
+          e.message;
       }
 
       return Promise.reject(e);
@@ -734,8 +986,12 @@ class HtmlWebpackPlugin {
    * Helper to return a sorted unique array of all asset files out of the asset object
    * @private
    */
-  getAssetFiles (assets) {
-    const files = _.uniq(Object.keys(assets).filter(assetType => assetType !== 'chunks' && assets[assetType]).reduce((files, assetType) => files.concat(assets[assetType]), []));
+  getAssetFiles(assets) {
+    const files = _uniq(
+      Object.keys(assets)
+        .filter((assetType) => assetType !== "chunks" && assets[assetType])
+        .reduce((files, assetType) => files.concat(assets[assetType]), []),
+    );
     files.sort();
     return files;
   }
@@ -751,7 +1007,13 @@ class HtmlWebpackPlugin {
    * @param {PreviousEmittedAssets} previousEmittedAssets
    * @returns {Promise<string|undefined>}
    */
-  generateFavicon (compiler, favicon, compilation, publicPath, previousEmittedAssets) {
+  generateFavicon(
+    compiler,
+    favicon,
+    compilation,
+    publicPath,
+    previousEmittedAssets,
+  ) {
     if (!favicon) {
       return Promise.resolve(undefined);
     }
@@ -760,7 +1022,10 @@ class HtmlWebpackPlugin {
 
     return promisify(compilation.inputFileSystem.readFile)(filename)
       .then((buf) => {
-        const source = new compiler.webpack.sources.RawSource(/** @type {string | Buffer} */ (buf), false);
+        const source = new compiler.webpack.sources.RawSource(
+          /** @type {string | Buffer} */ (buf),
+          false,
+        );
         const name = path.basename(filename);
 
         compilation.fileDependencies.add(filename);
@@ -770,12 +1035,19 @@ class HtmlWebpackPlugin {
         const faviconPath = publicPath + name;
 
         if (this.options.hash) {
-          return this.appendHash(faviconPath, /** @type {string} */ (compilation.hash));
+          return this.appendHash(
+            faviconPath,
+            /** @type {string} */ (compilation.hash),
+          );
         }
 
         return faviconPath;
       })
-      .catch(() => Promise.reject(new Error('HtmlWebpackPlugin: could not load file ' + filename)));
+      .catch(() =>
+        Promise.reject(
+          new Error("HtmlWebpackPlugin: could not load file " + filename),
+        ),
+      );
   }
 
   /**
@@ -785,24 +1057,26 @@ class HtmlWebpackPlugin {
    * @param {Array<string>} jsAssets
    * @returns {Array<HtmlTagObject>}
    */
-  generatedScriptTags (jsAssets) {
+  generatedScriptTags(jsAssets) {
     // @ts-ignore
-    return jsAssets.map(src => {
+    return jsAssets.map((src) => {
       const attributes = {};
 
-      if (this.options.scriptLoading === 'defer') {
+      if (this.options.scriptLoading === "defer") {
         attributes.defer = true;
-      } else if (this.options.scriptLoading === 'module') {
-        attributes.type = 'module';
+      } else if (this.options.scriptLoading === "module") {
+        attributes.type = "module";
+      } else if (this.options.scriptLoading === "systemjs-module") {
+        attributes.type = "systemjs-module";
       }
 
       attributes.src = src;
 
       return {
-        tagName: 'script',
+        tagName: "script",
         voidTag: false,
-        meta: { plugin: 'html-webpack-plugin' },
-        attributes
+        meta: { plugin: "html-webpack-plugin" },
+        attributes,
       };
     });
   }
@@ -814,15 +1088,15 @@ class HtmlWebpackPlugin {
    * @param {Array<string>} cssAssets
    * @returns {Array<HtmlTagObject>}
    */
-  generateStyleTags (cssAssets) {
-    return cssAssets.map(styleAsset => ({
-      tagName: 'link',
+  generateStyleTags(cssAssets) {
+    return cssAssets.map((styleAsset) => ({
+      tagName: "link",
       voidTag: true,
-      meta: { plugin: 'html-webpack-plugin' },
+      meta: { plugin: "html-webpack-plugin" },
       attributes: {
         href: styleAsset,
-        rel: 'stylesheet'
-      }
+        rel: "stylesheet",
+      },
     }));
   }
 
@@ -832,16 +1106,21 @@ class HtmlWebpackPlugin {
    * @param {string | {[attributeName: string]: string}} base
    * @returns {Array<HtmlTagObject>}
    */
-  generateBaseTag (base) {
-    return [{
-      tagName: 'base',
-      voidTag: true,
-      meta: { plugin: 'html-webpack-plugin' },
-      // attributes e.g. { href:"http://example.com/page.html" target:"_blank" }
-      attributes: typeof base === 'string' ? {
-        href: base
-      } : base
-    }];
+  generateBaseTag(base) {
+    return [
+      {
+        tagName: "base",
+        voidTag: true,
+        meta: { plugin: "html-webpack-plugin" },
+        // attributes e.g. { href:"http://example.com/page.html" target:"_blank" }
+        attributes:
+          typeof base === "string"
+            ? {
+                href: base,
+              }
+            : base,
+      },
+    ];
   }
 
   /**
@@ -851,7 +1130,7 @@ class HtmlWebpackPlugin {
    * @param {false | {[name: string]:  false | string | {[attributeName: string]: string|boolean}}} metaOptions
    * @returns {Array<HtmlTagObject>}
    */
-  generatedMetaTags (metaOptions) {
+  generatedMetaTags(metaOptions) {
     if (metaOptions === false) {
       return [];
     }
@@ -862,10 +1141,12 @@ class HtmlWebpackPlugin {
     const metaTagAttributeObjects = Object.keys(metaOptions)
       .map((metaName) => {
         const metaTagContent = metaOptions[metaName];
-        return (typeof metaTagContent === 'string') ? {
-          name: metaName,
-          content: metaTagContent
-        } : metaTagContent;
+        return typeof metaTagContent === "string"
+          ? {
+              name: metaName,
+              content: metaTagContent,
+            }
+          : metaTagContent;
       })
       .filter((attribute) => attribute !== false);
 
@@ -873,13 +1154,13 @@ class HtmlWebpackPlugin {
     // the html-webpack-plugin tag structure
     return metaTagAttributeObjects.map((metaTagAttributes) => {
       if (metaTagAttributes === false) {
-        throw new Error('Invalid meta tag');
+        throw new Error("Invalid meta tag");
       }
       return {
-        tagName: 'meta',
+        tagName: "meta",
         voidTag: true,
-        meta: { plugin: 'html-webpack-plugin' },
-        attributes: metaTagAttributes
+        meta: { plugin: "html-webpack-plugin" },
+        attributes: metaTagAttributes,
       };
     });
   }
@@ -891,16 +1172,18 @@ class HtmlWebpackPlugin {
    * @param {string} favicon
    * @returns {Array<HtmlTagObject>}
    */
-  generateFaviconTag (favicon) {
-    return [{
-      tagName: 'link',
-      voidTag: true,
-      meta: { plugin: 'html-webpack-plugin' },
-      attributes: {
-        rel: 'icon',
-        href: favicon
-      }
-    }];
+  generateFaviconTag(favicon) {
+    return [
+      {
+        tagName: "link",
+        voidTag: true,
+        meta: { plugin: "html-webpack-plugin" },
+        attributes: {
+          rel: "icon",
+          href: favicon,
+        },
+      },
+    ];
   }
 
   /**
@@ -917,24 +1200,24 @@ class HtmlWebpackPlugin {
       bodyTags: Array<HtmlTagObject>;
     }}
    */
-  groupAssetsByElements (assetTags, scriptTarget) {
+  groupAssetsByElements(assetTags, scriptTarget) {
     /** @type {{ headTags: Array<HtmlTagObject>; bodyTags: Array<HtmlTagObject>; }} */
     const result = {
-      headTags: [
-        ...assetTags.meta,
-        ...assetTags.styles
-      ],
-      bodyTags: []
+      headTags: [...assetTags.meta, ...assetTags.styles],
+      bodyTags: [],
     };
 
     // Add script tags to head or body depending on
     // the htmlPluginOptions
-    if (scriptTarget === 'body') {
+    if (scriptTarget === "body") {
       result.bodyTags.push(...assetTags.scripts);
     } else {
       // If script loading is blocking add the scripts to the end of the head
       // If script loading is non-blocking add the scripts in front of the css files
-      const insertPosition = this.options.scriptLoading === 'blocking' ? result.headTags.length : assetTags.meta.length;
+      const insertPosition =
+        this.options.scriptLoading === "blocking"
+          ? result.headTags.length
+          : assetTags.meta.length;
 
       result.headTags.splice(insertPosition, 0, ...assetTags.scripts);
     }
@@ -954,12 +1237,14 @@ class HtmlWebpackPlugin {
    * @param {Compilation} compilation
    * @returns {{ path: string, info: {} }}
    */
-  replacePlaceholdersInFilename (compiler, filename, fileContent, compilation) {
+  replacePlaceholdersInFilename(compiler, filename, fileContent, compilation) {
     if (/\[\\*([\w:]+)\\*\]/i.test(filename) === false) {
       return { path: filename, info: {} };
     }
 
-    const hash = compiler.webpack.util.createHash(compilation.outputOptions.hashFunction);
+    const hash = compiler.webpack.util.createHash(
+      compilation.outputOptions.hashFunction,
+    );
 
     hash.update(fileContent);
 
@@ -967,18 +1252,20 @@ class HtmlWebpackPlugin {
       hash.update(compilation.outputOptions.hashSalt);
     }
 
-    const contentHash = hash.digest(compilation.outputOptions.hashDigest).slice(0, compilation.outputOptions.hashDigestLength);
+    const contentHash = /** @type {string} */ (
+      hash
+        .digest(compilation.outputOptions.hashDigest)
+        .slice(0, compilation.outputOptions.hashDigestLength)
+    );
 
-    return compilation.getPathWithInfo(
-      filename,
-      {
+    return compilation.getPathWithInfo(filename, {
+      contentHash,
+      chunk: {
+        hash: contentHash,
+        // @ts-ignore
         contentHash,
-        chunk: {
-          hash: contentHash,
-          contentHash
-        }
-      }
-    );
+      },
+    });
   }
 
   /**
@@ -993,36 +1280,57 @@ class HtmlWebpackPlugin {
    * @param {{ value: string | undefined }} assetJson
    * @param {(err?: Error) => void} callback
    */
-  generateHTML (
+  generateHTML(
     compiler,
     compilation,
     outputName,
     childCompilerPlugin,
     previousEmittedAssets,
     assetJson,
-    callback
+    callback,
   ) {
     // Get all entry point names for this html file
     const entryNames = Array.from(compilation.entrypoints.keys());
-    const filteredEntryNames = this.filterEntryChunks(entryNames, this.options.chunks, this.options.excludeChunks);
-    const sortedEntryNames = this.sortEntryChunks(filteredEntryNames, this.options.chunksSortMode, compilation);
+    const filteredEntryNames = this.filterEntryChunks(
+      entryNames,
+      this.options.chunks,
+      this.options.excludeChunks,
+    );
+    const sortedEntryNames = this.sortEntryChunks(
+      filteredEntryNames,
+      this.options.chunksSortMode,
+      compilation,
+    );
     const templateResult = this.options.templateContent
       ? { mainCompilationHash: compilation.hash }
       : childCompilerPlugin.getCompilationEntryResult(this.options.template);
 
-    if ('error' in templateResult) {
-      compilation.errors.push(prettyError(templateResult.error, compiler.context).toString());
+    if ("error" in templateResult) {
+      compilation.errors.push(
+        prettyError(templateResult.error, compiler.context).toString(),
+      );
     }
 
     // If the child compilation was not executed during a previous main compile run
     // it is a cached result
-    const isCompilationCached = templateResult.mainCompilationHash !== compilation.hash;
+    const isCompilationCached =
+      templateResult.mainCompilationHash !== compilation.hash;
     /** Generated file paths from the entry point names */
-    const assetsInformationByGroups = this.getAssetsInformationByGroups(compilation, outputName, sortedEntryNames);
+    const assetsInformationByGroups = this.getAssetsInformationByGroups(
+      compilation,
+      outputName,
+      sortedEntryNames,
+    );
     // If the template and the assets did not change we don't have to emit the html
-    const newAssetJson = JSON.stringify(this.getAssetFiles(assetsInformationByGroups));
+    const newAssetJson = JSON.stringify(
+      this.getAssetFiles(assetsInformationByGroups),
+    );
 
-    if (isCompilationCached && this.options.cache && assetJson.value === newAssetJson) {
+    if (
+      isCompilationCached &&
+      this.options.cache &&
+      assetJson.value === newAssetJson
+    ) {
       previousEmittedAssets.forEach(({ name, source, info }) => {
         compilation.emitAsset(name, source, info);
       });
@@ -1035,127 +1343,204 @@ class HtmlWebpackPlugin {
     // The html-webpack plugin uses a object representation for the html-tags which will be injected
     // to allow altering them more easily
     // Just before they are converted a third-party-plugin author might change the order and content
-    const assetsPromise = this.generateFavicon(compiler, this.options.favicon, compilation, assetsInformationByGroups.publicPath, previousEmittedAssets)
-      .then((faviconPath) => {
-        assetsInformationByGroups.favicon = faviconPath;
-        return getHtmlWebpackPluginHooks(compilation).beforeAssetTagGeneration.promise({
-          assets: assetsInformationByGroups,
-          outputName,
-          plugin: this
-        });
+    const assetsPromise = this.generateFavicon(
+      compiler,
+      this.options.favicon,
+      compilation,
+      assetsInformationByGroups.publicPath,
+      previousEmittedAssets,
+    ).then((faviconPath) => {
+      assetsInformationByGroups.favicon = faviconPath;
+      return HtmlWebpackPlugin.getCompilationHooks(
+        compilation,
+      ).beforeAssetTagGeneration.promise({
+        assets: assetsInformationByGroups,
+        outputName,
+        plugin: this,
       });
+    });
 
     // Turn the js and css paths into grouped HtmlTagObjects
     const assetTagGroupsPromise = assetsPromise
       // And allow third-party-plugin authors to reorder and change the assetTags before they are grouped
-      .then(({ assets }) => getHtmlWebpackPluginHooks(compilation).alterAssetTags.promise({
-        assetTags: {
-          scripts: this.generatedScriptTags(assets.js),
-          styles: this.generateStyleTags(assets.css),
-          meta: [
-            ...(this.options.base !== false ? this.generateBaseTag(this.options.base) : []),
-            ...this.generatedMetaTags(this.options.meta),
-            ...(assets.favicon ? this.generateFaviconTag(assets.favicon) : [])
-          ]
-        },
-        outputName,
-        publicPath: assetsInformationByGroups.publicPath,
-        plugin: this
-      }))
+      .then(({ assets }) =>
+        HtmlWebpackPlugin.getCompilationHooks(
+          compilation,
+        ).alterAssetTags.promise({
+          assetTags: {
+            scripts: this.generatedScriptTags(assets.js),
+            styles: this.generateStyleTags(assets.css),
+            meta: [
+              ...(this.options.base !== false
+                ? this.generateBaseTag(this.options.base)
+                : []),
+              ...this.generatedMetaTags(this.options.meta),
+              ...(assets.favicon
+                ? this.generateFaviconTag(assets.favicon)
+                : []),
+            ],
+          },
+          outputName,
+          publicPath: assetsInformationByGroups.publicPath,
+          plugin: this,
+        }),
+      )
       .then(({ assetTags }) => {
         // Inject scripts to body unless it set explicitly to head
-        const scriptTarget = this.options.inject === 'head' ||
-        (this.options.inject !== 'body' && this.options.scriptLoading !== 'blocking') ? 'head' : 'body';
+        const scriptTarget =
+          this.options.inject === "head" ||
+          (this.options.inject !== "body" &&
+            this.options.scriptLoading !== "blocking")
+            ? "head"
+            : "body";
         // Group assets to `head` and `body` tag arrays
         const assetGroups = this.groupAssetsByElements(assetTags, scriptTarget);
         // Allow third-party-plugin authors to reorder and change the assetTags once they are grouped
-        return getHtmlWebpackPluginHooks(compilation).alterAssetTagGroups.promise({
+        return HtmlWebpackPlugin.getCompilationHooks(
+          compilation,
+        ).alterAssetTagGroups.promise({
           headTags: assetGroups.headTags,
           bodyTags: assetGroups.bodyTags,
           outputName,
           publicPath: assetsInformationByGroups.publicPath,
-          plugin: this
+          plugin: this,
         });
       });
 
     // Turn the compiled template into a nodejs function or into a nodejs string
-    const templateEvaluationPromise = Promise.resolve()
-      .then(() => {
-        if ('error' in templateResult) {
-          return this.options.showErrors ? prettyError(templateResult.error, compiler.context).toHtml() : 'ERROR';
-        }
-
-        // Allow to use a custom function / string instead
-        if (this.options.templateContent !== false) {
-          return this.options.templateContent;
-        }
-
-        // Once everything is compiled evaluate the html factory and replace it with its content
-        if ('compiledEntry' in templateResult) {
-          const compiledEntry = templateResult.compiledEntry;
-          const assets = compiledEntry.assets;
+    const templateEvaluationPromise = Promise.resolve().then(() => {
+      if ("error" in templateResult) {
+        return this.options.showErrors
+          ? prettyError(templateResult.error, compiler.context).toHtml()
+          : "ERROR";
+      }
 
-          // Store assets from child compiler to reemit them later
-          for (const name in assets) {
-            previousEmittedAssets.push({ name, source: assets[name].source, info: assets[name].info });
-          }
+      // Allow to use a custom function / string instead
+      if (this.options.templateContent !== false) {
+        return this.options.templateContent;
+      }
 
-          return this.evaluateCompilationResult(compiledEntry.content, assetsInformationByGroups.publicPath, this.options.template);
+      // Once everything is compiled evaluate the html factory and replace it with its content
+      if ("compiledEntry" in templateResult) {
+        const compiledEntry = templateResult.compiledEntry;
+        const assets = compiledEntry.assets;
+
+        // Store assets from child compiler to re-emit them later
+        for (const name in assets) {
+          previousEmittedAssets.push({
+            name,
+            source: assets[name].source,
+            info: assets[name].info,
+          });
         }
 
-        return Promise.reject(new Error('Child compilation contained no compiledEntry'));
-      });
-    const templateExectutionPromise = Promise.all([assetsPromise, assetTagGroupsPromise, templateEvaluationPromise])
+        return this.evaluateCompilationResult(
+          compiledEntry.content,
+          assetsInformationByGroups.publicPath,
+          this.options.template,
+        );
+      }
+
+      return Promise.reject(
+        new Error("Child compilation contained no compiledEntry"),
+      );
+    });
+    const templateExecutionPromise = Promise.all([
+      assetsPromise,
+      assetTagGroupsPromise,
+      templateEvaluationPromise,
+    ])
       // Execute the template
-      .then(([assetsHookResult, assetTags, compilationResult]) => typeof compilationResult !== 'function'
-        ? compilationResult
-        : this.executeTemplate(compilationResult, assetsHookResult.assets, { headTags: assetTags.headTags, bodyTags: assetTags.bodyTags }, compilation));
+      .then(([assetsHookResult, assetTags, compilationResult]) =>
+        typeof compilationResult !== "function"
+          ? compilationResult
+          : this.executeTemplate(
+              compilationResult,
+              assetsHookResult.assets,
+              { headTags: assetTags.headTags, bodyTags: assetTags.bodyTags },
+              compilation,
+            ),
+      );
 
-    const injectedHtmlPromise = Promise.all([assetTagGroupsPromise, templateExectutionPromise])
+    const injectedHtmlPromise = Promise.all([
+      assetTagGroupsPromise,
+      templateExecutionPromise,
+    ])
       // Allow plugins to change the html before assets are injected
       .then(([assetTags, html]) => {
-        const pluginArgs = { html, headTags: assetTags.headTags, bodyTags: assetTags.bodyTags, plugin: this, outputName };
-        return getHtmlWebpackPluginHooks(compilation).afterTemplateExecution.promise(pluginArgs);
+        const pluginArgs = {
+          html,
+          headTags: assetTags.headTags,
+          bodyTags: assetTags.bodyTags,
+          plugin: this,
+          outputName,
+        };
+        return HtmlWebpackPlugin.getCompilationHooks(
+          compilation,
+        ).afterTemplateExecution.promise(pluginArgs);
       })
       .then(({ html, headTags, bodyTags }) => {
-        return this.postProcessHtml(compiler, html, assetsInformationByGroups, { headTags, bodyTags });
+        return this.postProcessHtml(compiler, html, assetsInformationByGroups, {
+          headTags,
+          bodyTags,
+        });
       });
 
     const emitHtmlPromise = injectedHtmlPromise
       // Allow plugins to change the html after assets are injected
       .then((html) => {
         const pluginArgs = { html, plugin: this, outputName };
-        return getHtmlWebpackPluginHooks(compilation).beforeEmit.promise(pluginArgs)
-          .then(result => result.html);
+        return HtmlWebpackPlugin.getCompilationHooks(compilation)
+          .beforeEmit.promise(pluginArgs)
+          .then((result) => result.html);
       })
-      .catch(err => {
+      .catch((err) => {
         // In case anything went wrong the promise is resolved
         // with the error message and an error is logged
         compilation.errors.push(prettyError(err, compiler.context).toString());
-        return this.options.showErrors ? prettyError(err, compiler.context).toHtml() : 'ERROR';
+        return this.options.showErrors
+          ? prettyError(err, compiler.context).toHtml()
+          : "ERROR";
       })
-      .then(html => {
-        const filename = outputName.replace(/\[templatehash([^\]]*)\]/g, require('util').deprecate(
-          (match, options) => `[contenthash${options}]`,
-          '[templatehash] is now [contenthash]')
+      .then((html) => {
+        const filename = outputName.replace(
+          /\[templatehash([^\]]*)\]/g,
+          require("util").deprecate(
+            (match, options) => `[contenthash${options}]`,
+            "[templatehash] is now [contenthash]",
+          ),
+        );
+        const replacedFilename = this.replacePlaceholdersInFilename(
+          compiler,
+          filename,
+          html,
+          compilation,
         );
-        const replacedFilename = this.replacePlaceholdersInFilename(compiler, filename, html, compilation);
         const source = new compiler.webpack.sources.RawSource(html, false);
 
         // Add the evaluated html code to the webpack assets
-        compilation.emitAsset(replacedFilename.path, source, replacedFilename.info);
+        compilation.emitAsset(
+          replacedFilename.path,
+          source,
+          replacedFilename.info,
+        );
         previousEmittedAssets.push({ name: replacedFilename.path, source });
 
         return replacedFilename.path;
       })
-      .then((finalOutputName) => getHtmlWebpackPluginHooks(compilation).afterEmit.promise({
-        outputName: finalOutputName,
-        plugin: this
-      }).catch(err => {
-        /** @type {Logger} */
-        (this.logger).error(err);
-        return null;
-      }).then(() => null));
+      .then((finalOutputName) =>
+        HtmlWebpackPlugin.getCompilationHooks(compilation)
+          .afterEmit.promise({
+            outputName: finalOutputName,
+            plugin: this,
+          })
+          .catch((err) => {
+            /** @type {Logger} */
+            (this.logger).error(err);
+            return null;
+          })
+          .then(() => null),
+      );
 
     // Once all files are added to the webpack compilation
     // let the webpack compiler continue
@@ -1179,15 +1564,15 @@ class HtmlWebpackPlugin {
  * @param {ProcessedHtmlWebpackOptions} options
  * @returns {TemplateParameter}
  */
-function templateParametersGenerator (compilation, assets, assetTags, options) {
+function templateParametersGenerator(compilation, assets, assetTags, options) {
   return {
     compilation: compilation,
     webpackConfig: compilation.options,
     htmlWebpackPlugin: {
       tags: assetTags,
       files: assets,
-      options: options
-    }
+      options: options,
+    },
   };
 }
 
@@ -1202,7 +1587,8 @@ HtmlWebpackPlugin.version = 5;
  *
  * Usage: HtmlWebpackPlugin.getHooks(compilation).HOOK_NAME.tapAsync('YourPluginName', () => { ... });
  */
-HtmlWebpackPlugin.getHooks = getHtmlWebpackPluginHooks;
+// TODO remove me in the next major release in favor getCompilationHooks
+HtmlWebpackPlugin.getHooks = HtmlWebpackPlugin.getCompilationHooks;
 HtmlWebpackPlugin.createHtmlTagObject = createHtmlTagObject;
 
 module.exports = HtmlWebpackPlugin;