html-webpack-plugin 4.2.2 → 4.5.0

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.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)
+
+
+### 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)
 
 

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>
@@ -137,6 +138,7 @@ Allowed values are as follows
 |**`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)|
+|**`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 +148,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

@@ -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]
@@ -42,6 +44,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',
@@ -149,19 +152,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,7 +208,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 +221,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 +313,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;
@@ -513,6 +520,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 +529,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 +605,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 +642,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

@@ -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.2",
+  "version": "4.5.0",
   "license": "MIT",
   "description": "Simplifies creation of HTML files to serve your webpack bundles",
   "author": "Jan Nicklas <j.nicklas@me.com> (https://github.com/jantimon)",
@@ -61,7 +61,7 @@
     "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

@@ -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;
     /**