html-webpack-plugin 5.6.0 → 5.6.2

package/lib/child-compiler.js

@@ -1,5 +1,5 @@
 // @ts-check
-'use strict';
+"use strict";
 
 /**
  * @file
@@ -22,7 +22,7 @@ class HtmlWebpackChildCompiler {
    *
    * @param {string[]} templates
    */
-  constructor (templates) {
+  constructor(templates) {
     /**
      * @type {string[]} templateIds
      * The template array will allow us to keep track which input generated which output
@@ -38,7 +38,11 @@ class HtmlWebpackChildCompiler {
      * All file dependencies of the child compiler
      * @type {{fileDependencies: string[], contextDependencies: string[], missingDependencies: string[]}}
      */
-    this.fileDependencies = { fileDependencies: [], contextDependencies: [], missingDependencies: [] };
+    this.fileDependencies = {
+      fileDependencies: [],
+      contextDependencies: [],
+      missingDependencies: [],
+    };
   }
 
   /**
@@ -46,7 +50,7 @@ class HtmlWebpackChildCompiler {
    *
    * @returns {boolean}
    */
-  isCompiling () {
+  isCompiling() {
     return !this.didCompile() && this.compilationStartedTimestamp !== undefined;
   }
 
@@ -55,7 +59,7 @@ class HtmlWebpackChildCompiler {
    *
    * @returns {boolean}
    */
-  didCompile () {
+  didCompile() {
     return this.compilationEndedTimestamp !== undefined;
   }
 
@@ -66,7 +70,7 @@ class HtmlWebpackChildCompiler {
    * @param {import('webpack').Compilation} mainCompilation
    * @returns {Promise<{[templatePath: string]: ChildCompilationTemplateResult}>}
    */
-  compileTemplates (mainCompilation) {
+  compileTemplates(mainCompilation) {
     const webpack = mainCompilation.compiler.webpack;
     const Compilation = webpack.Compilation;
 
@@ -83,46 +87,62 @@ class HtmlWebpackChildCompiler {
     }
 
     const outputOptions = {
-      filename: '__child-[name]',
-      publicPath: '',
+      filename: "__child-[name]",
+      publicPath: "",
       library: {
-        type: 'var',
-        name: 'HTML_WEBPACK_PLUGIN_RESULT'
+        type: "var",
+        name: "HTML_WEBPACK_PLUGIN_RESULT",
       },
-      scriptType: /** @type {'text/javascript'} */('text/javascript'),
-      iife: true
+      scriptType: /** @type {'text/javascript'} */ ("text/javascript"),
+      iife: true,
     };
-    const compilerName = 'HtmlWebpackCompiler';
+    const compilerName = "HtmlWebpackCompiler";
     // Create an additional child compiler which takes the template
     // and turns it into an Node.JS html factory.
     // This allows us to use loaders during the compilation
-    const childCompiler = mainCompilation.createChildCompiler(compilerName, outputOptions, [
-      // Compile the template to nodejs javascript
-      new NodeTargetPlugin(),
-      new NodeTemplatePlugin(),
-      new LoaderTargetPlugin('node'),
-      new webpack.library.EnableLibraryPlugin('var')
-    ]);
+    const childCompiler = mainCompilation.createChildCompiler(
+      compilerName,
+      outputOptions,
+      [
+        // Compile the template to nodejs javascript
+        new NodeTargetPlugin(),
+        new NodeTemplatePlugin(),
+        new LoaderTargetPlugin("node"),
+        new webpack.library.EnableLibraryPlugin("var"),
+      ],
+    );
     // The file path context which webpack uses to resolve all relative files to
     childCompiler.context = mainCompilation.compiler.context;
 
     // Generate output file names
-    const temporaryTemplateNames = this.templates.map((template, index) => `__child-HtmlWebpackPlugin_${index}-${template}`);
+    const temporaryTemplateNames = this.templates.map(
+      (template, index) => `__child-HtmlWebpackPlugin_${index}-${template}`,
+    );
 
     // Add all templates
     this.templates.forEach((template, index) => {
-      new EntryPlugin(childCompiler.context, 'data:text/javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;', `HtmlWebpackPlugin_${index}-${template}`).apply(childCompiler);
-      new EntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}-${template}`).apply(childCompiler);
+      new EntryPlugin(
+        childCompiler.context,
+        "data:text/javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;",
+        `HtmlWebpackPlugin_${index}-${template}`,
+      ).apply(childCompiler);
+      new EntryPlugin(
+        childCompiler.context,
+        template,
+        `HtmlWebpackPlugin_${index}-${template}`,
+      ).apply(childCompiler);
     });
 
     // The templates are compiled and executed by NodeJS - similar to server side rendering
     // Unfortunately this causes issues as some loaders require an absolute URL to support ES Modules
     // The following config enables relative URL support for the child compiler
     childCompiler.options.module = { ...childCompiler.options.module };
-    childCompiler.options.module.parser = { ...childCompiler.options.module.parser };
+    childCompiler.options.module.parser = {
+      ...childCompiler.options.module.parser,
+    };
     childCompiler.options.module.parser.javascript = {
       ...childCompiler.options.module.parser.javascript,
-      url: 'relative'
+      url: "relative",
     };
 
     this.compilationStartedTimestamp = new Date().getTime();
@@ -131,23 +151,26 @@ class HtmlWebpackChildCompiler {
       /** @type {Source[]} */
       const extractedAssets = [];
 
-      childCompiler.hooks.thisCompilation.tap('HtmlWebpackPlugin', (compilation) => {
-        compilation.hooks.processAssets.tap(
-          {
-            name: 'HtmlWebpackPlugin',
-            stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
-          },
-          (assets) => {
-            temporaryTemplateNames.forEach((temporaryTemplateName) => {
-              if (assets[temporaryTemplateName]) {
-                extractedAssets.push(assets[temporaryTemplateName]);
-
-                compilation.deleteAsset(temporaryTemplateName);
-              }
-            });
-          }
-        );
-      });
+      childCompiler.hooks.thisCompilation.tap(
+        "HtmlWebpackPlugin",
+        (compilation) => {
+          compilation.hooks.processAssets.tap(
+            {
+              name: "HtmlWebpackPlugin",
+              stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+            },
+            (assets) => {
+              temporaryTemplateNames.forEach((temporaryTemplateName) => {
+                if (assets[temporaryTemplateName]) {
+                  extractedAssets.push(assets[temporaryTemplateName]);
+
+                  compilation.deleteAsset(temporaryTemplateName);
+                }
+              });
+            },
+          );
+        },
+      );
 
       childCompiler.runAsChild((err, entries, childCompilation) => {
         // Extract templates
@@ -158,20 +181,34 @@ class HtmlWebpackChildCompiler {
 
         // Extract file dependencies
         if (entries && childCompilation) {
-          this.fileDependencies = { fileDependencies: Array.from(childCompilation.fileDependencies), contextDependencies: Array.from(childCompilation.contextDependencies), missingDependencies: Array.from(childCompilation.missingDependencies) };
+          this.fileDependencies = {
+            fileDependencies: Array.from(childCompilation.fileDependencies),
+            contextDependencies: Array.from(
+              childCompilation.contextDependencies,
+            ),
+            missingDependencies: Array.from(
+              childCompilation.missingDependencies,
+            ),
+          };
         }
 
         // Reject the promise if the childCompilation contains error
-        if (childCompilation && childCompilation.errors && childCompilation.errors.length) {
-          const errorDetails = childCompilation.errors.map(error => {
+        if (
+          childCompilation &&
+          childCompilation.errors &&
+          childCompilation.errors.length
+        ) {
+          const errorDetailsArray = [];
+          for (const error of childCompilation.errors) {
             let message = error.message;
             if (error.stack) {
-              message += '\n' + error.stack;
+              message += "\n" + error.stack;
             }
-            return message;
-          }).join('\n');
+            errorDetailsArray.push(message);
+          }
+          const errorDetails = errorDetailsArray.join("\n");
 
-          reject(new Error('Child compilation failed:\n' + errorDetails));
+          reject(new Error("Child compilation failed:\n" + errorDetails));
 
           return;
         }
@@ -183,7 +220,7 @@ class HtmlWebpackChildCompiler {
         }
 
         if (!childCompilation || !entries) {
-          reject(new Error('Empty child compilation'));
+          reject(new Error("Empty child compilation"));
           return;
         }
 
@@ -206,9 +243,9 @@ class HtmlWebpackChildCompiler {
           result[this.templates[entryIndex]] = {
             // TODO, can we have Buffer here?
             content: /** @type {string} */ (templateSource),
-            hash: childCompilation.hash || 'XXXX',
+            hash: childCompilation.hash || "XXXX",
             entry: entries[entryIndex],
-            assets
+            assets,
           };
         });
 
@@ -223,5 +260,5 @@ class HtmlWebpackChildCompiler {
 }
 
 module.exports = {
-  HtmlWebpackChildCompiler
+  HtmlWebpackChildCompiler,
 };

package/lib/chunksorter.js

@@ -1,5 +1,5 @@
 // @ts-check
-'use strict';
+"use strict";
 
 /** @typedef {import("webpack").Compilation} Compilation */
 
@@ -14,7 +14,7 @@ module.exports = {};
  * @param  {Array<string>} chunks the chunks to sort
  * @return {Array<string>} The sorted chunks
  */
-module.exports.none = chunks => chunks;
+module.exports.none = (chunks) => chunks;
 
 /**
  * Sort manually by the chunks
@@ -23,7 +23,11 @@ module.exports.none = chunks => chunks;
  * @param {any} htmlWebpackPluginOptions the plugin options
  * @return {string[]} The sorted chunks
  */
-module.exports.manual = (entryPointNames, compilation, htmlWebpackPluginOptions) => {
+module.exports.manual = (
+  entryPointNames,
+  compilation,
+  htmlWebpackPluginOptions,
+) => {
   const chunks = htmlWebpackPluginOptions.chunks;
   if (!Array.isArray(chunks)) {
     return entryPointNames;

package/lib/errors.js

@@ -1,18 +1,18 @@
 // @ts-nocheck
-'use strict';
+"use strict";
 
 let prettyError;
 
-function getPrettyError () {
+function getPrettyError() {
   if (!prettyError) {
     // lazily require to improve startup time since pretty-error is rather heavy package
-    const PrettyError = require('pretty-error');
+    const PrettyError = require("pretty-error");
     prettyError = new PrettyError();
     prettyError.withoutColors();
-    prettyError.skipPackage('html-plugin-evaluation');
+    prettyError.skipPackage("html-plugin-evaluation");
     prettyError.skipNodeFiles();
     prettyError.skip(function (traceLine) {
-      return traceLine.path === 'html-plugin-evaluation';
+      return traceLine.path === "html-plugin-evaluation";
     });
   }
   return prettyError;
@@ -21,20 +21,22 @@ function getPrettyError () {
 module.exports = function (err, context) {
   return {
     toHtml: function () {
-      return 'Html Webpack Plugin:\n<pre>\n' + this.toString() + '</pre>';
+      return "Html Webpack Plugin:\n<pre>\n" + this.toString() + "</pre>";
     },
     toJsonHtml: function () {
       return JSON.stringify(this.toHtml());
     },
     toString: function () {
       try {
-        return getPrettyError().render(err).replace(/webpack:\/\/\/\./g, context);
+        return getPrettyError()
+          .render(err)
+          .replace(/webpack:\/\/\/\./g, context);
       } catch (e) {
         // This can sometimes fail. We don't know why, but returning the
         // original error is better than returning the error thrown by
         // pretty-error.
         return err;
       }
-    }
+    },
   };
 };

package/lib/html-tags.js

@@ -17,7 +17,23 @@
  * All html tag elements which must not contain innerHTML
  * @see https://www.w3.org/TR/html5/syntax.html#void-elements
  */
-const voidTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+const voidTags = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr",
+];
 
 /**
  * Turn a tag definition into a html string
@@ -27,20 +43,32 @@ const voidTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'k
  * @param xhtml {boolean}
  *   Whether the generated html should add closing slashes to be xhtml compliant
  */
-function htmlTagObjectToString (tagDefinition, xhtml) {
+function htmlTagObjectToString(tagDefinition, xhtml) {
   const attributes = Object.keys(tagDefinition.attributes || {})
     .filter(function (attributeName) {
-      return tagDefinition.attributes[attributeName] === '' || tagDefinition.attributes[attributeName];
+      return (
+        tagDefinition.attributes[attributeName] === "" ||
+        tagDefinition.attributes[attributeName]
+      );
     })
     .map(function (attributeName) {
       if (tagDefinition.attributes[attributeName] === true) {
-        return xhtml ? attributeName + '="' + attributeName + '"' : attributeName;
+        return xhtml
+          ? attributeName + '="' + attributeName + '"'
+          : attributeName;
       }
-      return attributeName + '="' + tagDefinition.attributes[attributeName] + '"';
+      return (
+        attributeName + '="' + tagDefinition.attributes[attributeName] + '"'
+      );
     });
-  return '<' + [tagDefinition.tagName].concat(attributes).join(' ') + (tagDefinition.voidTag && xhtml ? '/' : '') + '>' +
-    (tagDefinition.innerHTML || '') +
-    (tagDefinition.voidTag ? '' : '</' + tagDefinition.tagName + '>');
+  return (
+    "<" +
+    [tagDefinition.tagName].concat(attributes).join(" ") +
+    (tagDefinition.voidTag && xhtml ? "/" : "") +
+    ">" +
+    (tagDefinition.innerHTML || "") +
+    (tagDefinition.voidTag ? "" : "</" + tagDefinition.tagName + ">")
+  );
 }
 
 /**
@@ -59,13 +87,13 @@ function htmlTagObjectToString (tagDefinition, xhtml) {
  *
  * @returns {HtmlTagObject}
  */
-function createHtmlTagObject (tagName, attributes, innerHTML, meta) {
+function createHtmlTagObject(tagName, attributes, innerHTML, meta) {
   return {
     tagName: tagName,
     voidTag: voidTags.indexOf(tagName) !== -1,
     attributes: attributes || {},
     meta: meta || {},
-    innerHTML: innerHTML
+    innerHTML: innerHTML,
   };
 }
 
@@ -87,13 +115,13 @@ function createHtmlTagObject (tagName, attributes, innerHTML, meta) {
  *
  */
 class HtmlTagArray extends Array {
-  toString () {
-    return this.join('');
+  toString() {
+    return this.join("");
   }
 }
 
 module.exports = {
   HtmlTagArray: HtmlTagArray,
   createHtmlTagObject: createHtmlTagObject,
-  htmlTagObjectToString: htmlTagObjectToString
+  htmlTagObjectToString: htmlTagObjectToString,
 };

package/lib/loader.js

@@ -1,14 +1,16 @@
 /* This loader renders the template with underscore if no other loader was found */
 // @ts-nocheck
-'use strict';
-const _ = require('lodash');
+"use strict";
+const _template = require("lodash/template");
 
 module.exports = function (source) {
   // Get templating options
   const options = this.getOptions();
   const force = options.force || false;
 
-  const allLoadersButThisOne = this.loaders.filter((loader) => loader.normal !== module.exports);
+  const allLoadersButThisOne = this.loaders.filter(
+    (loader) => loader.normal !== module.exports,
+  );
 
   // This loader shouldn't kick in if there is any other loader (unless it's explicitly enforced)
   if (allLoadersButThisOne.length > 0 && !force) {
@@ -16,8 +18,11 @@ module.exports = function (source) {
   }
 
   // Allow only one html-webpack-plugin loader to allow loader options in the webpack config
-  const htmlWebpackPluginLoaders = this.loaders.filter((loader) => loader.normal === module.exports);
-  const lastHtmlWebpackPluginLoader = htmlWebpackPluginLoaders[htmlWebpackPluginLoaders.length - 1];
+  const htmlWebpackPluginLoaders = this.loaders.filter(
+    (loader) => loader.normal === module.exports,
+  );
+  const lastHtmlWebpackPluginLoader =
+    htmlWebpackPluginLoaders[htmlWebpackPluginLoaders.length - 1];
   if (this.loaders[this.loaderIndex] !== lastHtmlWebpackPluginLoader) {
     return source;
   }
@@ -29,12 +34,22 @@ module.exports = function (source) {
 
   // The following part renders the template with lodash as a minimalistic loader
   //
-  const template = _.template(source, { interpolate: /<%=([\s\S]+?)%>/g, variable: 'data', ...options });
+  const template = _template(source, {
+    interpolate: /<%=([\s\S]+?)%>/g,
+    variable: "data",
+    ...options,
+  });
   // Use `eval("require")("lodash")` to enforce using the native nodejs require
   // during template execution
-  return 'var _ = eval("require")(' + JSON.stringify(require.resolve('lodash')) + ');' +
-    'module.exports = function (templateParams) { with(templateParams) {' +
-      // Execute the lodash template
-      'return (' + template.source + ')();' +
-    '}}';
+  return (
+    'var _ = eval("require")(' +
+    JSON.stringify(require.resolve("lodash")) +
+    ");" +
+    "module.exports = function (templateParams) { with(templateParams) {" +
+    // Execute the lodash template
+    "return (" +
+    template.source +
+    ")();" +
+    "}}"
+  );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-plugin",
-  "version": "5.6.0",
+  "version": "5.6.2",
   "license": "MIT",
   "description": "Simplifies creation of HTML files to serve your webpack bundles",
   "author": "Jan Nicklas <j.nicklas@me.com> (https://github.com/jantimon)",
@@ -13,38 +13,52 @@
     "typings.d.ts"
   ],
   "scripts": {
-    "pretest": "semistandard",
     "posttest": "tsc",
-    "commit": "git-cz",
-    "build-examples": "node examples/build-examples.js",
-    "test": "jest --runInBand --verbose --coverage",
-    "test-watch": "jest --runInBand --watch",
     "puml": "npx puml generate flow.puml -o flow.png",
+    "build-examples": "node examples/build-examples.js",
+    "commitlint": "commitlint --from=master",
+    "security": "npm audit --omit=dev",
+    "lint:prettier": "prettier --cache --list-different .",
+    "lint:js": "eslint --cache .",
+    "lint:spelling": "cspell --cache --no-must-find-files --quiet \"**/*.*\"",
+    "lint": "npm-run-all -l -p \"lint:**\"",
+    "fix:js": "npm run lint:js -- --fix",
+    "fix:prettier": "npm run lint:prettier -- --write",
+    "fix": "npm-run-all -l fix:js fix:prettier",
+    "test:only": "cross-env NODE_ENV=test jest",
+    "test:watch": "npm run test:only -- --watch",
+    "test:manual": "npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js",
+    "test:coverage": "npm run test:only -- --coverage",
+    "pretest": "npm run lint",
+    "test": "npm run test:coverage",
+    "prepare": "husky",
     "release": "standard-version"
   },
-  "semistandard": {
-    "ignore": [
-      "examples/*/dist/**/*.*"
-    ]
-  },
   "devDependencies": {
+    "@commitlint/cli": "^18.4.4",
+    "@commitlint/config-conventional": "^18.4.4",
     "@types/node": "^20.2.5",
-    "commitizen": "^4.2.4",
+    "cross-env": "^7.0.3",
+    "cspell": "^8.3.2",
     "css-loader": "5.0.1",
     "cz-conventional-changelog": "2.1.0",
     "dir-compare": "^3.3.0",
+    "eslint": "^8.56.0",
     "html-loader": "2.1.1",
+    "husky": "^9.0.10",
     "jest": "^27.2.5",
+    "lint-staged": "^15.2.2",
     "mini-css-extract-plugin": "^1.6.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.2.5",
     "pug": "3.0.2",
     "pug-loader": "2.4.0",
     "raw-loader": "4.0.2",
     "rimraf": "2.6.3",
-    "semistandard": "^13.0.1",
     "standard-version": "^9.3.0",
     "style-loader": "2.0.0",
     "typescript": "4.9.4",
-    "webpack": "^5.86.0",
+    "webpack": "^5.95.0",
     "webpack-cli": "4.5.0",
     "webpack-recompilation-simulator": "3.2.0"
   },
@@ -79,11 +93,6 @@
   "engines": {
     "node": ">=10.13.0"
   },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
   "jest": {
     "watchPathIgnorePatterns": [
       "<rootDir>/dist"

package/typings.d.ts

@@ -20,6 +20,7 @@ declare class HtmlWebpackPlugin {
   apply(compiler: Compiler): void;
 
   static getHooks(compilation: Compilation): HtmlWebpackPlugin.Hooks;
+  static getCompilationHooks(compilation: Compilation): HtmlWebpackPlugin.Hooks;
 
   /**
    * Static helper to create a tag object to be get injected into the dom
@@ -27,7 +28,7 @@ declare class HtmlWebpackPlugin {
   static createHtmlTagObject(
     tagName: string,
     attributes?: { [attributeName: string]: string | boolean },
-    innerHTML?: string
+    innerHTML?: string,
   ): HtmlWebpackPlugin.HtmlTagObject;
 
   static readonly version: number;
@@ -112,8 +113,8 @@ declare namespace HtmlWebpackPlugin {
         };
     /**
      * HTML Minification options accepts the following values:
-     * - Set to `false` to disable minifcation
-     * - Set to `'auto'` to enable minifcation only for production mode
+     * - Set to `false` to disable minification
+     * - Set to `'auto'` to enable minification only for production mode
      * - Set to custom minification according to
      * {@link https://github.com/kangax/html-minifier#options-quick-reference}
      */
@@ -155,7 +156,7 @@ declare namespace HtmlWebpackPlugin {
             headTags: HtmlTagObject[];
             bodyTags: HtmlTagObject[];
           },
-          options: ProcessedOptions
+          options: ProcessedOptions,
         ) => { [option: string]: any } | Promise<{ [option: string]: any }>)
       | { [option: string]: any };
     /**
@@ -211,7 +212,7 @@ declare namespace HtmlWebpackPlugin {
         styles: HtmlTagObject[];
         meta: HtmlTagObject[];
       };
-      publicPath: string,
+      publicPath: string;
       outputName: string;
       plugin: HtmlWebpackPlugin;
     }>;
@@ -220,7 +221,7 @@ declare namespace HtmlWebpackPlugin {
       headTags: HtmlTagObject[];
       bodyTags: HtmlTagObject[];
       outputName: string;
-      publicPath: string,
+      publicPath: string;
       plugin: HtmlWebpackPlugin;
     }>;
 
@@ -285,7 +286,7 @@ declare namespace HtmlWebpackPlugin {
      * E.g. `{'plugin': 'html-webpack-plugin'}`
      */
     meta: {
-      plugin?: string,
+      plugin?: string;
       [metaAttributeName: string]: any;
     };
   }