html-webpack-plugin 4.2.1 → 4.4.1

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 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.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)
+
+
+### Features
+
+* Allow to use console.log inside templates ([c3f2fdc](https://github.com/jantimon/html-webpack-plugin/commit/c3f2fdc))
+
+
+
+## [4.2.2](https://github.com/jantimon/html-webpack-plugin/compare/v4.2.1...v4.2.2) (2020-04-30)
+
+
+### Bug Fixes
+
+* Prevent "cannot read property info of undefined" when reading meta information from assets ([253ce30](https://github.com/jantimon/html-webpack-plugin/commit/253ce30))
+* use modern icon tag rel attribute for favicons ([c40dd85](https://github.com/jantimon/html-webpack-plugin/commit/c40dd85))
+
+
+
 ## [4.2.1](https://github.com/jantimon/html-webpack-plugin/compare/v4.2.0...v4.2.1) (2020-04-28)
 
 

package/README.md

@@ -78,6 +78,7 @@ The `html-webpack-plugin` provides [hooks](https://github.com/jantimon/html-webp
  * [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>
@@ -146,7 +147,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)|
 
@@ -275,9 +276,6 @@ The following variables are available in the template by default (you can extend
     favicon?: string;
     ```
 
-  - `htmlWebpackPlugin.options`: the options hash that was passed to
-     the plugin. In addition to the options actually used by this plugin,
-     you can use this hash to pass arbitrary data through to your template.
 
 - `webpackConfig`: the webpack configuration that was used for this compilation. This
   can be used, for example, to get the `publicPath` (`webpackConfig.output.publicPath`).

package/index.js

@@ -27,6 +27,8 @@ const getHtmlWebpackPluginHooks = require('./lib/hooks.js').getHtmlWebpackPlugin
 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]
@@ -149,12 +151,16 @@ 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
@@ -201,7 +207,7 @@ class HtmlWebpackPlugin {
             plugin: self
           }))
           .then(({ assetTags }) => {
-            // Inject scripts to body unless it set explictly to head
+            // Inject scripts to body unless it set explicitly to head
             const scriptTarget = self.options.inject === 'head' ? 'head' : 'body';
             // Group assets to `head` and `body` tag arrays
             const assetGroups = this.generateAssetGroups(assetTags, scriptTarget);
@@ -214,7 +220,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) {
@@ -306,7 +312,7 @@ class HtmlWebpackPlugin {
     // To extract the result during the evaluation this part has to be removed.
     source = source.replace('var HTML_WEBPACK_PLUGIN_RESULT =', '');
     const template = this.options.template.replace(/^.+!/, '').replace(/\?.+$/, '');
-    const vmContext = vm.createContext(_.extend({ HTML_WEBPACK_PLUGIN: true, require: require }, global));
+    const vmContext = vm.createContext(_.extend({ HTML_WEBPACK_PLUGIN: true, require: require, console: console }, global));
     const vmScript = new vm.Script(source, { filename: template });
     // Evaluate code and cast to string
     let newSource;
@@ -527,9 +533,12 @@ class HtmlWebpackPlugin {
     /**
      * @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 webpackPublicPath = webpackMajorVersion === 4
+      ? compilation.mainTemplate.getPublicPath({ hash: compilationHash })
+      : compilation.getAssetPath(compilation.outputOptions.publicPath, { hash: compilationHash });
+
     const isPublicPathDefined = webpackPublicPath.trim() !== '';
     let publicPath = isPublicPathDefined
       // If a hard coded public path exists use it
@@ -581,11 +590,12 @@ class HtmlWebpackPlugin {
         // compilation.getAsset was introduced in webpack 4.4.0
         // once the support pre webpack 4.4.0 is dropped please
         // remove the following guard:
-        if (!compilation.getAsset) {
+        const asset = compilation.getAsset && compilation.getAsset(chunkFile);
+        if (!asset) {
           return true;
         }
-        // Prevent hot-module files from beeing included:
-        const assetMetaInformation = compilation.getAsset(chunkFile).info || {};
+        // Prevent hot-module files from being included:
+        const assetMetaInformation = asset.info || {};
         return !(assetMetaInformation.hotModuleReplacement || assetMetaInformation.development);
       });
 
@@ -621,8 +631,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
@@ -785,7 +795,7 @@ class HtmlWebpackPlugin {
       tagName: 'link',
       voidTag: true,
       attributes: {
-        rel: 'shortcut icon',
+        rel: 'icon',
         href: faviconPath
       }
     }];

package/lib/cached-child-compiler.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-plugin",
-  "version": "4.2.1",
+  "version": "4.4.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)",

package/typings.d.ts

@@ -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,8 +59,8 @@ 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;
     /**
@@ -70,7 +81,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 +98,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;
     /**