npm - html-webpack-plugin - Versions diffs - 4.3.0 → 4.5.1 - Mend

html-webpack-plugin 4.3.0 → 4.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.md +41 -1
package/README.md +20 -9
package/index.js +45 -19
package/lib/cached-child-compiler.js +1 -1
package/lib/child-compiler.js +22 -7
package/lib/file-watcher-api.js +1 -1
package/lib/html-tags.js +3 -3
package/package.json +3 -3
package/typings.d.ts +23 -7

package/CHANGELOG.md CHANGED Viewed

@@ -1,7 +1,47 @@
-# Change Log
+# Changelog
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+### [4.5.1](https://github.com/jantimon/html-webpack-plugin/compare/v4.5.0...v4.5.1) (2021-01-03)
+### Bug Fixes
+* inject javascripts in the <head> tag for inject:true and scriptLoading:'defer' ([4f7064e](https://github.com/jantimon/html-webpack-plugin/commit/4f7064ee56fe710e8f416018956647a72c270fb1))
+# [4.5.0](https://github.com/jantimon/html-webpack-plugin/compare/v4.4.1...v4.5.0) (2020-09-21)
+### Features
+* Add publicPath option to overrule the default path generation ([#1516](https://github.com/jantimon/html-webpack-plugin/issues/1516)) ([19b5122](https://github.com/jantimon/html-webpack-plugin/commit/19b5122))
+* update webpack dependency range to allow installing webpack 5 beta  ([f3ccdd5](https://github.com/jantimon/html-webpack-plugin/commit/f3ccdd5)), closes [#1504](https://github.com/jantimon/html-webpack-plugin/issues/1504)
+## [4.4.1](https://github.com/jantimon/html-webpack-plugin/compare/v4.4.0...v4.4.1) (2020-08-30)
+### Bug Fixes
+* broken typings.d.ts in v4.4.0 ([#1503](https://github.com/jantimon/html-webpack-plugin/issues/1503)) ([98ad756](https://github.com/jantimon/html-webpack-plugin/commit/98ad756))
+# [4.4.0](https://github.com/jantimon/html-webpack-plugin/compare/v4.3.0...v4.4.0) (2020-08-30)
+### Bug Fixes
+* fix typos in comments ([#1484](https://github.com/jantimon/html-webpack-plugin/issues/1484)) ([6b0711e](https://github.com/jantimon/html-webpack-plugin/commit/6b0711e))
+### Features
+* added v5 compilation support and deleted depreciation warnings ([4ae7be8](https://github.com/jantimon/html-webpack-plugin/commit/4ae7be8)), closes [#1454](https://github.com/jantimon/html-webpack-plugin/issues/1454)
 # [4.3.0](https://github.com/jantimon/html-webpack-plugin/compare/v4.2.2...v4.3.0) (2020-04-30)

package/README.md CHANGED Viewed

@@ -21,6 +21,19 @@
 <h2 align="center">Install</h2>
+<h3>Webpack 5</h3>
+```bash
+  npm i --save-dev html-webpack-plugin@next
+```
+```bash
+  yarn add --dev html-webpack-plugin@next
+```
+<h3>Webpack 4</h3>
 ```bash
   npm i --save-dev html-webpack-plugin
 ```
@@ -60,24 +73,21 @@ The `html-webpack-plugin` provides [hooks](https://github.com/jantimon/html-webp
  * [webpack-subresource-integrity](https://www.npmjs.com/package/webpack-subresource-integrity) for enhanced asset security
  * [appcache-webpack-plugin](https://github.com/lettertwo/appcache-webpack-plugin) for iOS and Android offline usage
  * [favicons-webpack-plugin](https://github.com/jantimon/favicons-webpack-plugin) which generates favicons and icons for iOS, Android and desktop browsers
- * [html-webpack-harddisk-plugin](https://github.com/jantimon/html-webpack-harddisk-plugin) can be used to always write to disk the html file, useful when webpack-dev-server / HMR are being used
- * [html-webpack-inline-source-plugin](https://github.com/DustinJackson/html-webpack-inline-source-plugin) to inline your assets in the resulting HTML file
+ * [html-webpack-harddisk-plugin](https://github.com/jantimon/html-webpack-harddisk-plugin) can be used to always write to disk the html file, useful when webpack-dev-server / HMR are being used
  * [html-webpack-inline-svg-plugin](https://github.com/thegc/html-webpack-inline-svg-plugin) to inline SVGs in the resulting HTML file.
  * [html-webpack-exclude-assets-plugin](https://github.com/jamesjieye/html-webpack-exclude-assets-plugin) for excluding assets using regular expressions
  * [html-webpack-include-assets-plugin](https://github.com/jharris4/html-webpack-include-assets-plugin) for including lists of js or css file paths (such as those copied by the copy-webpack-plugin).
- * [script-ext-html-webpack-plugin](https://github.com/numical/script-ext-html-webpack-plugin) to add `async`, `defer` or `module` attributes to your `<script>` elements, or even inline them
- * [style-ext-html-webpack-plugin](https://github.com/numical/style-ext-html-webpack-plugin) to convert your `<link>`s to external stylesheets into `<style>` elements containing internal CSS
  * [html-webpack-injector](https://github.com/thearchitgarg/html-webpack-injector) to inject chunks in `head` or `body` (different locations ) of same html document.
  * [resource-hints-webpack-plugin](https://github.com/jantimon/resource-hints-webpack-plugin) to add resource hints for faster initial page loads using `<link rel='preload'>` and `<link rel='prefetch'>`
  * [preload-webpack-plugin](https://github.com/GoogleChrome/preload-webpack-plugin) for automatically wiring up asynchronous (and other types) of JavaScript chunks using `<link rel='preload'>` helping with lazy-loading
  * [link-media-html-webpack-plugin](https://github.com/yaycmyk/link-media-html-webpack-plugin) allows for injected stylesheet `<link />` tags to have their media attribute set automatically; useful for providing specific desktop/mobile/print etc. stylesheets that the browser will conditionally download
- * [inline-chunk-manifest-html-webpack-plugin](https://github.com/jouni-kantola/inline-chunk-manifest-html-webpack-plugin) for inlining webpack's chunk manifest. Default extracts manifest and inlines in `<head>`
  * [html-webpack-inline-style-plugin](https://github.com/djaax/html-webpack-inline-style-plugin) for inlining styles to HTML elements using [juice](https://github.com/Automattic/juice). Useful for email generation automatisation.
  * [html-webpack-exclude-empty-assets-plugin](https://github.com/KnisterPeter/html-webpack-exclude-empty-assets-plugin) removes empty assets from being added to the html. This fixes some problems with extract-text-plugin with webpack 4.
  * [webpack-concat-plugin](https://github.com/hxlniada/webpack-concat-plugin) for concat and uglify files that needn't to be webpack bundles(for legacy files) and inject to html-webpack-plugin.
  * [html-webpack-link-type-plugin](https://github.com/steadyapp/html-webpack-link-type-plugin) adds a configurable mimetype to resources injected as links (such as adding type="text/css" to external stylesheets) for compatibility with "strict mode".
  * [csp-html-webpack-plugin](https://github.com/slackhq/csp-html-webpack-plugin) to add [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) meta tags to the HTML output
  * [webpack-nomodule-plugin](https://github.com/swimmadude66/webpack-nomodule-plugin) allows you to add a `nomodule` attribute to specific injected scripts, which prevents the scripts from being loaded by newer browsers. Good for limiting loads of polyfills.
+  * [html-webpack-skip-assets-plugin](https://github.com/swimmadude66/html-webpack-skip-assets-plugin) Skip adding certain output files to the html file. Built as a drop-in replacement for [html-webpack-exclude-assets-plugin](https://www.npmjs.com/package/html-webpack-exclude-assets-plugin) and works with newer [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) versions
 <h2 align="center">Usage</h2>
@@ -122,12 +132,12 @@ If you have multiple `webpack` entry points, they will all be included with `scr
 If you have any CSS assets in webpack's output (for example, CSS extracted with the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin))
 then these will be included with `<link>` tags in the HTML head.
-If you have plugins that make use of it, `html-webpack-plugin` should be ordered first before any of the integrated plugins.
+If you have plugins that make use of it, `html-webpack-plugin` should be ordered first before any of the integrated Plugins.
 <h2 align="center">Options</h2>
 You can pass a hash of configuration options to `html-webpack-plugin`.
-Allowed values are as follows
+Allowed values are as follows:
 |Name|Type|Default|Description|
 |:--:|:--:|:-----:|:----------|
@@ -136,7 +146,8 @@ Allowed values are as follows
 |**`template`**|`{String}`|``|`webpack` relative or absolute path to the template. By default it will use `src/index.ejs` if it exists. Please see the [docs](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md) for details|
 |**`templateContent`**|`{string\|Function\|false}`|false| Can be used instead of `template` to provide an inline template - please read the [Writing Your Own Templates](https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates) section |
 |**`templateParameters`**|`{Boolean\|Object\|Function}`| `false`| Allows to overwrite the parameters used in the template - see [example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/template-parameters) |
-|**`inject`**|`{Boolean\|String}`|`true`|`true \|\| 'head' \|\| 'body' \|\| false` Inject all assets into the given `template` or `templateContent`. When passing `true` or `'body'` all javascript resources will be placed at the bottom of the body element. `'head'` will place the scripts in the head element - see the [inject:false example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/custom-insertion-position)|
+|**`inject`**|`{Boolean\|String}`|`true`|`true \|\| 'head' \|\| 'body' \|\| false` Inject all assets into the given `template` or `templateContent`. When passing `'body'` all javascript resources will be placed at the bottom of the body element. `'head'` will place the scripts in the head element. Passing `true` will add it to the head/body depending on the `scriptLoading` option. Passing `false` will disable automatic injections. - see the [inject:false example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/custom-insertion-position)|
+|**`publicPath`**|`{String\|'auto'}`|`'auto'`|The publicPath used for script and link tags|
 |**`scriptLoading`**|`{'blocking'\|'defer'}`|`'blocking'`| Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. |
 |**`favicon`**|`{String}`|``|Adds the given favicon path to the output HTML|
 |**`meta`**|`{Object}`|`{}`|Allows to inject `meta`-tags. E.g. `meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`|
@@ -146,7 +157,7 @@ Allowed values are as follows
 |**`cache`**|`{Boolean}`|`true`|Emit the file only if it was changed|
 |**`showErrors`**|`{Boolean}`|`true`|Errors details will be written into the HTML page|
 |**`chunks`**|`{?}`|`?`|Allows you to add only some chunks (e.g only the unit-test chunk)|
-|**[`chunksSortMode`](#plugins)**|`{String\|Function}`|`auto`|Allows to control how chunks should be sorted before they are included to the HTML. Allowed values are `'none' \| 'auto' \| 'manual' \| {Function}`|
+|**`chunksSortMode`**|`{String\|Function}`|`auto`|Allows to control how chunks should be sorted before they are included to the HTML. Allowed values are `'none' \| 'auto' \| 'manual' \| {Function}`|
 |**`excludeChunks`**|`{Array.<string>}`|``|Allows you to skip some chunks (e.g don't add the unit-test chunk)|
 |**`xhtml`**|`{Boolean}`|`false`|If `true` render the `link` tags as self-closing (XHTML compliant)|

package/index.js CHANGED Viewed

@@ -23,10 +23,13 @@ const { createHtmlTagObject, htmlTagObjectToString, HtmlTagArray } = require('./
 const prettyError = require('./lib/errors.js');
 const chunkSorter = require('./lib/chunksorter.js');
 const getHtmlWebpackPluginHooks = require('./lib/hooks.js').getHtmlWebpackPluginHooks;
+const { assert } = require('console');
 const fsStatAsync = promisify(fs.stat);
 const fsReadFileAsync = promisify(fs.readFile);
+const webpackMajorVersion = Number(require('webpack/package.json').version.split('.')[0]);
 class HtmlWebpackPlugin {
   /**
    * @param {HtmlWebpackOptions} [options]
@@ -42,6 +45,7 @@ class HtmlWebpackPlugin {
       templateContent: false,
       templateParameters: templateParametersGenerator,
       filename: 'index.html',
+      publicPath: userOptions.publicPath === undefined ? 'auto' : userOptions.publicPath,
       hash: false,
       inject: userOptions.scriptLoading !== 'defer' ? 'body' : 'head',
       scriptLoading: 'blocking',
@@ -62,6 +66,10 @@ class HtmlWebpackPlugin {
     /** @type {ProcessedHtmlWebpackOptions} */
     this.options = Object.assign(defaultOptions, userOptions);
+    // Assert correct option spelling
+    assert(this.options.scriptLoading === 'defer' || this.options.scriptLoading === 'blocking', 'scriptLoading needs to be set to "defer" or "blocking');
+    assert(this.options.inject === true || this.options.inject === false || this.options.inject === 'head' || this.options.inject === 'body', 'inject needs to be set to true, false, "head" or "body');
     // Default metaOptions if no template is provided
     if (!userOptions.template && this.options.templateContent === false && this.options.meta) {
       const defaultMeta = {
@@ -149,19 +157,23 @@ class HtmlWebpackPlugin {
           compilation.errors.push(prettyError(templateResult.error, compiler.context).toString());
         }
-        const childCompilationOutputName = compilation.mainTemplate.getAssetPath(this.options.filename, 'compiledEntry' in templateResult ? {
+        const compiledEntries = 'compiledEntry' in templateResult ? {
           hash: templateResult.compiledEntry.hash,
           chunk: templateResult.compiledEntry.entry
         } : {
           hash: templateResult.mainCompilationHash
-        });
+        };
+        const childCompilationOutputName = webpackMajorVersion === 4
+          ? compilation.mainTemplate.getAssetPath(this.options.filename, compiledEntries)
+          : compilation.getAssetPath(this.options.filename, compiledEntries);
         // If the child compilation was not executed during a previous main compile run
         // it is a cached result
         const isCompilationCached = templateResult.mainCompilationHash !== compilation.hash;
         // Turn the entry point names into file paths
-        const assets = self.htmlWebpackPluginAssets(compilation, childCompilationOutputName, sortedEntryNames);
+        const assets = self.htmlWebpackPluginAssets(compilation, childCompilationOutputName, sortedEntryNames, this.options.publicPath);
         // If the template and the assets did not change we don't have to emit the html
         const assetJson = JSON.stringify(self.getAssetFiles(assets));
@@ -201,8 +213,9 @@ class HtmlWebpackPlugin {
             plugin: self
           }))
           .then(({ assetTags }) => {
-            // Inject scripts to body unless it set explictly to head
-            const scriptTarget = self.options.inject === 'head' ? 'head' : 'body';
+            // Inject scripts to body unless it set explicitly to head
+            const scriptTarget = self.options.inject === 'head' ||
+                (self.options.inject !== 'body' && self.options.scriptLoading === 'defer') ? 'head' : 'body';
             // Group assets to `head` and `body` tag arrays
             const assetGroups = this.generateAssetGroups(assetTags, scriptTarget);
             // Allow third-party-plugin authors to reorder and change the assetTags once they are grouped
@@ -214,7 +227,7 @@ class HtmlWebpackPlugin {
             });
           });
-        // Turn the compiled tempalte into a nodejs function or into a nodejs string
+        // Turn the compiled template into a nodejs function or into a nodejs string
         const templateEvaluationPromise = Promise.resolve()
           .then(() => {
             if ('error' in templateResult) {
@@ -513,6 +526,7 @@ class HtmlWebpackPlugin {
    * for all given entry names
    * @param {WebpackCompilation} compilation
    * @param {string[]} entryNames
+   * @param {string | 'auto'} customPublicPath
    * @returns {{
       publicPath: string,
       js: Array<string>,
@@ -521,22 +535,34 @@ class HtmlWebpackPlugin {
       favicon?: string
     }}
    */
-  htmlWebpackPluginAssets (compilation, childCompilationOutputName, entryNames) {
+  htmlWebpackPluginAssets (compilation, childCompilationOutputName, entryNames, customPublicPath) {
     const compilationHash = compilation.hash;
     /**
      * @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 realtive path
+     * fallback to a relative path
      */
-    const webpackPublicPath = compilation.mainTemplate.getPublicPath({ hash: compilationHash });
-    const isPublicPathDefined = webpackPublicPath.trim() !== '';
-    let 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(compilation.options.output.path, path.dirname(childCompilationOutputName)), compilation.options.output.path)
-        .split(path.sep).join('/');
+    const webpackPublicPath = webpackMajorVersion === 4
+      ? compilation.mainTemplate.getPublicPath({ hash: compilationHash })
+      : compilation.getAssetPath(compilation.outputOptions.publicPath, { hash: compilationHash });
+    const isPublicPathDefined = webpackMajorVersion === 4
+      ? webpackPublicPath.trim() !== ''
+      // Webpack 5 introduced "auto" - however it can not be retrieved at runtime
+      : webpackPublicPath.trim() !== '' && webpackPublicPath !== 'auto';
+    let publicPath =
+      // If the html-webpack-plugin options contain a custom public path uset 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(childCompilationOutputName)), compilation.options.output.path)
+            .split(path.sep).join('/')
+        );
     if (publicPath.length && publicPath.substr(-1, 1) !== '/') {
       publicPath += '/';
@@ -585,7 +611,7 @@ class HtmlWebpackPlugin {
         if (!asset) {
           return true;
         }
-        // Prevent hot-module files from beeing included:
+        // Prevent hot-module files from being included:
         const assetMetaInformation = asset.info || {};
         return !(assetMetaInformation.hotModuleReplacement || assetMetaInformation.development);
       });
@@ -622,8 +648,8 @@ class HtmlWebpackPlugin {
   }
   /**
-   * Converts a favicon file from disk to a webpack ressource
-   * and returns the url to the ressource
+   * Converts a favicon file from disk to a webpack resource
+   * and returns the url to the resource
    *
    * @param {string|false} faviconFilePath
    * @param {WebpackCompilation} compilation

package/lib/cached-child-compiler.js CHANGED Viewed

@@ -58,7 +58,7 @@ class CachedChildCompilation {
      * @type {WebpackCompiler}
      */
     this.compiler = compiler;
-    // Create a singlton instance for the compiler
+    // Create a singleton instance for the compiler
     // if there is none
     if (compilerMap.has(compiler)) {
       return;

package/lib/child-compiler.js CHANGED Viewed

@@ -18,8 +18,8 @@ const LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin');
 const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
 /**
- * The HtmlWebpackChildCompiler is a helper to allow resusing one childCompiler
- * for multile HtmlWebpackPlugin instances to improve the compilation performance.
+ * The HtmlWebpackChildCompiler is a helper to allow reusing one childCompiler
+ * for multiple HtmlWebpackPlugin instances to improve the compilation performance.
  */
 class HtmlWebpackChildCompiler {
   /**
@@ -53,14 +53,14 @@ class HtmlWebpackChildCompiler {
   /**
    * Returns true if the childCompiler is currently compiling
-   * @retuns {boolean}
+   * @returns {boolean}
    */
   isCompiling () {
     return !this.didCompile() && this.compilationStartedTimestamp !== undefined;
   }
   /**
-   * Returns true if the childCOmpiler is done compiling
+   * Returns true if the childCompiler is done compiling
    */
   didCompile () {
     return this.compilationEndedTimestamp !== undefined;
@@ -118,7 +118,16 @@ class HtmlWebpackChildCompiler {
         }
         // Reject the promise if the childCompilation contains error
         if (childCompilation && childCompilation.errors && childCompilation.errors.length) {
-          const errorDetails = childCompilation.errors.map(error => error.message + (error.error ? ':\n' + error.error : '')).join('\n');
+          const errorDetails = childCompilation.errors.map(error => {
+            let message = error.message;
+            if (error.error) {
+              message += ':\n' + error.error;
+            }
+            if (error.stack) {
+              message += '\n' + error.stack;
+            }
+            return message;
+          }).join('\n');
           reject(new Error('Child compilation failed:\n' + errorDetails));
           return;
         }
@@ -159,12 +168,18 @@ class HtmlWebpackChildCompiler {
  * @returns Array<string>
  */
 function extractHelperFilesFromCompilation (mainCompilation, childCompilation, filename, childEntryChunks) {
+  const webpackMajorVersion = Number(require('webpack/package.json').version.split('.')[0]);
   const helperAssetNames = childEntryChunks.map((entryChunk, index) => {
-    return mainCompilation.mainTemplate.getAssetPath(filename, {
+    const entryConfig = {
       hash: childCompilation.hash,
       chunk: entryChunk,
       name: `HtmlWebpackPlugin_${index}`
-    });
+    };
+    return webpackMajorVersion === 4
+      ? mainCompilation.mainTemplate.getAssetPath(filename, entryConfig)
+      : mainCompilation.getAssetPath(filename, entryConfig);
   });
   helperAssetNames.forEach((helperFileName) => {

package/lib/file-watcher-api.js CHANGED Viewed

@@ -1,6 +1,6 @@
 // @ts-check
 /**
- * To use the availble webpack core api
+ * To use the available webpack core api
  * we have to use different child compilers
  * depending on the used webpack version
  */

package/lib/html-tags.js CHANGED Viewed

@@ -2,8 +2,8 @@
 /** @typedef {import("../typings").HtmlTagObject} HtmlTagObject */
 /**
  * @file
- * This file provides to helper to create html as a object repesentation as
- * thoses objects are easier to modify than pure string representations
+ * This file provides to helper to create html as a object representation as
+ * those objects are easier to modify than pure string representations
  *
  * Usage:
  * ```
@@ -47,7 +47,7 @@ function htmlTagObjectToString (tagDefinition, xhtml) {
  * Static helper to create a tag object to be get injected into the dom
  *
  * @param {string} tagName
- * the name of the tage e.g. 'div'
+ * the name of the tag e.g. 'div'
  *
  * @param {{[attributeName: string]: string|boolean}} [attributes]
  * tag attributes e.g. `{ 'class': 'example', disabled: true }`

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-plugin",
-  "version": "4.3.0",
+  "version": "4.5.1",
   "license": "MIT",
   "description": "Simplifies creation of HTML files to serve your webpack bundles",
   "author": "Jan Nicklas <j.nicklas@me.com> (https://github.com/jantimon)",
@@ -55,13 +55,13 @@
     "@types/webpack": "^4.41.8",
     "html-minifier-terser": "^5.0.1",
     "loader-utils": "^1.2.3",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.20",
     "pretty-error": "^2.1.1",
     "tapable": "^1.1.3",
     "util.promisify": "1.0.0"
   },
   "peerDependencies": {
-    "webpack": ">=4.0.0 < 6.0.0"
+    "webpack": "^4.0.0 || ^5.0.0"
   },
   "keywords": [
     "webpack",

package/typings.d.ts CHANGED Viewed

@@ -10,6 +10,17 @@ declare class HtmlWebpackPlugin {
   apply(compiler: Compiler): void;
   static getHooks(compilation: compilation.Compilation): HtmlWebpackPlugin.Hooks;
+  /**
+   * Static helper to create a tag object to be get injected into the dom
+   */
+  static createHtmlTagObject(
+    tagName: string,
+    attributes?: { [attributeName: string]: string | boolean },
+    innerHTML?: string
+  ): HtmlWebpackPlugin.HtmlTagObject;
+  static readonly version: number;
 }
 declare namespace HtmlWebpackPlugin {
@@ -23,7 +34,7 @@ declare namespace HtmlWebpackPlugin {
   interface ProcessedOptions {
     /**
      * Emit the file only if it was changed.
-     * Default: `true`.
+     * @default true
      */
     cache: boolean;
     /**
@@ -32,14 +43,14 @@ declare namespace HtmlWebpackPlugin {
     chunks: "all" | string[];
     /**
      * Allows to control how chunks should be sorted before they are included to the html.
-     * Default: `'auto'`.
+     * @default 'auto'
      */
     chunksSortMode:
       | "auto"
       | "manual"
       | (((entryNameA: string, entryNameB: string) => number));
     /**
-     * List all entries which should not be injeccted
+     * List all entries which should not be injected
      */
     excludeChunks: string[];
     /**
@@ -48,10 +59,15 @@ declare namespace HtmlWebpackPlugin {
     favicon: false | string;
     /**
      * The file to write the HTML to.
-     * Defaults to `index.html`.
      * Supports subdirectories eg: `assets/admin.html`
+     * @default 'index.html'
      */
     filename: string;
+    /**
+     * By default the public path is set to `auto` - that way the html-webpack-plugin will try
+     * to set the publicPath according to the current filename and the webpack publicPath setting
+     */
+    publicPath: string | 'auto';
     /**
      * If `true` then append a unique `webpack` compilation hash to all included scripts and CSS files.
      * This is useful for cache busting
@@ -70,7 +86,7 @@ declare namespace HtmlWebpackPlugin {
      * blocking will result in <script src="..."></script>
      * defer will result in <script defer src="..."></script>
      *
-     * The default behaviour is blocking
+     * @default 'blocking'
      */
     scriptLoading:
       | "blocking"
@@ -87,11 +103,11 @@ declare namespace HtmlWebpackPlugin {
             | { [attributeName: string]: string | boolean }; // custom properties e.g. { name:"viewport" content:"width=500, initial-scale=1" }
         };
     /**
-     * HTML Minification options accepts the following valeus:
+     * 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 custom minification according to
-     * @https://github.com/kangax/html-minifier#options-quick-reference
+     * {@link https://github.com/kangax/html-minifier#options-quick-reference}
      */
     minify: 'auto' | boolean | MinifyOptions;
     /**