html-webpack-plugin 4.0.0-alpha.1 → 4.0.0-beta.11

package/lib/compiler.js

@@ -31,15 +31,15 @@ class HtmlWebpackChildCompiler {
     /**
      * @type {Promise<{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}>}
      */
-    this.compilationPromise;
+    this.compilationPromise; // eslint-disable-line
     /**
      * @type {number}
      */
-    this.compilationStartedTimestamp;
+    this.compilationStartedTimestamp; // eslint-disable-line
     /**
      * @type {number}
      */
-    this.compilationEndedTimestamp;
+    this.compilationEndedTimestamp; // eslint-disable-line
     /**
      * All file dependencies of the child compiler
      * @type {string[]}
@@ -119,18 +119,6 @@ class HtmlWebpackChildCompiler {
     new LibraryTemplatePlugin('HTML_WEBPACK_PLUGIN_RESULT', 'var').apply(childCompiler);
     new LoaderTargetPlugin('node').apply(childCompiler);
 
-    // Fix for "Uncaught TypeError: __webpack_require__(...) is not a function"
-    // Hot module replacement requires that every child compiler has its own
-    // cache. @see https://github.com/ampedandwired/html-webpack-plugin/pull/179
-    childCompiler.hooks.compilation.tap('HtmlWebpackPlugin', compilation => {
-      if (compilation.cache) {
-        if (!compilation.cache[compilerName]) {
-          compilation.cache[compilerName] = {};
-        }
-        compilation.cache = compilation.cache[compilerName];
-      }
-    });
-
     // Add all templates
     this.templates.forEach((template, index) => {
       new SingleEntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}`).apply(childCompiler);
@@ -145,7 +133,7 @@ class HtmlWebpackChildCompiler {
           : [];
         // Extract file dependencies
         if (entries) {
-          this.fileDependencies = extractFileDependenciesFilesFromCompilation(entries);
+          this.fileDependencies = Array.from(childCompilation.fileDependencies);
         }
         // Reject the promise if the childCompilation contains error
         if (childCompilation && childCompilation.errors && childCompilation.errors.length) {
@@ -191,7 +179,7 @@ class HtmlWebpackChildCompiler {
  */
 function extractHelperFilesFromCompilation (mainCompilation, childCompilation, filename, childEntryChunks) {
   const helperAssetNames = childEntryChunks.map((entryChunk, index) => {
-    return mainCompilation.mainTemplate.hooks.assetPath.call(filename, {
+    return mainCompilation.mainTemplate.getAssetPath(filename, {
       hash: childCompilation.hash,
       chunk: entryChunk,
       name: `HtmlWebpackPlugin_${index}`
@@ -209,21 +197,6 @@ function extractHelperFilesFromCompilation (mainCompilation, childCompilation, f
   return helperContents;
 }
 
-/**
- * Return all file dependencies from the given set of entries.
- * @param {WebpackChunk[]} entries
- * @returns {string[]}
- */
-function extractFileDependenciesFilesFromCompilation (entries) {
-  const fileDependencies = new Map();
-  entries.forEach((entry) => {
-    entry.entryModule.buildInfo.fileDependencies.forEach((fileDependency) => {
-      fileDependencies.set(fileDependency, true);
-    });
-  });
-  return Array.from(fileDependencies.keys());
-}
-
 /**
  * @type {WeakMap<WebpackCompiler, HtmlWebpackChildCompiler>}}
  */
@@ -288,7 +261,7 @@ function compileTemplate (templatePath, outputFilename, mainCompilation) {
     if (!compiledTemplates[templatePath]) console.log(Object.keys(compiledTemplates), templatePath);
     const compiledTemplate = compiledTemplates[templatePath];
     // Replace [hash] placeholders in filename
-    const outputName = mainCompilation.mainTemplate.hooks.assetPath.call(outputFilename, {
+    const outputName = mainCompilation.mainTemplate.getAssetPath(outputFilename, {
       hash: compiledTemplate.hash,
       chunk: compiledTemplate.entry
     });

package/lib/errors.js

@@ -18,7 +18,14 @@ module.exports = function (err, context) {
       return JSON.stringify(this.toHtml());
     },
     toString: function () {
-      return prettyError.render(err).replace(/webpack:\/\/\/\./g, context);
+      try {
+        return prettyError.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/hooks.js

@@ -1,7 +1,5 @@
 // @ts-check
-/* eslint-disable */
-/// <reference path="../typings.d.ts" />
-/* eslint-enable */
+/** @typedef {import("../typings").Hooks} HtmlWebpackPluginHooks */
 'use strict';
 /**
  * This file provides access to all public htmlWebpackPlugin hooks
@@ -12,23 +10,21 @@
 
 const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
 
-// The following typedef holds the API definition for all available hooks
-// to allow easier access when using ts-check or typescript inside plugins
-/** @typedef {{
-
+// 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<{entryName: string, path: string}>,
-        css: Array<{entryName: string, path: string}>,
+        js: Array<string>,
+        css: Array<string>,
         favicon?: string | undefined,
         manifest?: string | undefined
       },
       outputName: string,
       plugin: HtmlWebpackPlugin
     }>,
-
   alterAssetTags:
     AsyncSeriesWaterfallHook<{
       assetTags: {
@@ -39,7 +35,6 @@ const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
       outputName: string,
       plugin: HtmlWebpackPlugin
     }>,
-
   alterAssetTagGroups:
     AsyncSeriesWaterfallHook<{
       headTags: Array<HtmlTagObject | HtmlTagObject>,
@@ -47,7 +42,6 @@ const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
       outputName: string,
       plugin: HtmlWebpackPlugin
     }>,
-
   afterTemplateExecution:
     AsyncSeriesWaterfallHook<{
       html: string,
@@ -56,22 +50,18 @@ const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
       outputName: string,
       plugin: HtmlWebpackPlugin,
     }>,
-
   beforeEmit:
     AsyncSeriesWaterfallHook<{
       html: string,
       outputName: string,
       plugin: HtmlWebpackPlugin,
     }>,
-
   afterEmit:
     AsyncSeriesWaterfallHook<{
       outputName: string,
       plugin: HtmlWebpackPlugin
-    }>,
-
-  }} HtmlWebpackPluginHooks
-  */
+    }>
+*/
 
 /**
  * @type {WeakMap<WebpackCompilation, HtmlWebpackPluginHooks>}}

package/lib/html-tags.js

@@ -1,7 +1,5 @@
 // @ts-check
-/* eslint-disable */
-/// <reference path="../typings.d.ts" />
-/* eslint-enable */
+/** @typedef {import("../typings").HtmlTagObject} HtmlTagObject */
 /**
  * @file
  * This file provides to helper to create html as a object repesentation as

package/lib/loader.js

@@ -21,11 +21,12 @@ module.exports = function (source) {
     return source;
   }
 
-  // The following part renders the template with lodash as aminimalistic loader
+  // The following part renders the template with lodash as a minimalistic loader
   //
   const template = _.template(source, _.defaults(options, { interpolate: /<%=([\s\S]+?)%>/g, variable: 'data' }));
-  // Require !!lodash - using !! will disable all loaders (e.g. babel)
-  return 'var _ = require(' + loaderUtils.stringifyRequest(this, '!!' + require.resolve('lodash')) + ');' +
+  // Use __non_webpack_require__ to enforce using the native nodejs require
+  // during template execution
+  return 'var _ = __non_webpack_require__(' + JSON.stringify(require.resolve('lodash')) + ');' +
     'module.exports = function (templateParams) { with(templateParams) {' +
       // Execute the lodash template
       'return (' + template.source + ')();' +

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "html-webpack-plugin",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-beta.11",
   "license": "MIT",
   "description": "Simplifies creation of HTML files to serve your webpack bundles",
-  "author": "Charles Blaxland <charles.blaxland@gmail.com> (https://github.com/ampedandwired)",
+  "author": "Jan Nicklas <j.nicklas@me.com> (https://github.com/jantimon)",
   "main": "index.js",
+  "types": "typings.d.ts",
   "files": [
     "lib/",
     "index.js",
-    "default_index.ejs"
+    "default_index.ejs",
+    "typings.d.ts"
   ],
   "scripts": {
     "pretest": "semistandard",
@@ -26,37 +28,35 @@
     ]
   },
   "devDependencies": {
+    "@types/html-minifier": "3.5.3",
     "@types/loader-utils": "1.1.3",
-    "@types/node": "10.1.1",
-    "appcache-webpack-plugin": "^1.3.0",
-    "commitizen": "2.9.6",
-    "css-loader": "^0.26.1",
+    "@types/node": "11.13.9",
+    "@types/tapable": "1.0.4",
+    "appcache-webpack-plugin": "1.4.0",
+    "commitizen": "4.0.3",
+    "css-loader": "2.1.1",
     "cz-conventional-changelog": "2.1.0",
-    "dir-compare": "1.3.0",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "file-loader": "^0.9.0",
-    "html-loader": "^0.4.4",
-    "jest": "23.3.0",
+    "dir-compare": "1.7.2",
+    "file-loader": "3.0.1",
+    "html-loader": "0.5.5",
+    "jest": "24.7.1",
+    "mini-css-extract-plugin": "0.6.0",
     "pug": "2.0.3",
     "pug-loader": "2.4.0",
-    "rimraf": "^2.5.4",
-    "semistandard": "8.0.0",
-    "standard-version": "^4.3.0",
-    "style-loader": "^0.13.1",
-    "typescript": "2.9.1",
-    "underscore-template-loader": "^0.7.3",
-    "url-loader": "^0.5.7",
-    "webpack": "4.1.0",
-    "webpack-cli": "2.0.12",
-    "webpack-recompilation-simulator": "^3.0.0"
+    "rimraf": "2.6.3",
+    "semistandard": "13.0.1",
+    "standard-version": "5.0.2",
+    "style-loader": "0.23.1",
+    "typescript": "3.5.2",
+    "webpack": "4.35.2",
+    "webpack-recompilation-simulator": "3.0.0"
   },
   "dependencies": {
-    "@types/tapable": "1.0.2",
-    "html-minifier": "^3.2.3",
-    "loader-utils": "^1.1.0",
-    "lodash": "^4.17.10",
-    "pretty-error": "^2.0.2",
-    "tapable": "^1.0.0",
+    "html-minifier-terser": "^5.0.1",
+    "loader-utils": "^1.2.3",
+    "lodash": "^4.17.15",
+    "pretty-error": "^2.1.1",
+    "tapable": "^1.1.3",
     "util.promisify": "1.0.0"
   },
   "peerDependencies": {

package/typings.d.ts

@@ -0,0 +1,236 @@
+import { AsyncSeriesWaterfallHook } from "tapable";
+import { Compiler } from 'webpack';
+import { Options as HtmlMinifierOptions } from "html-minifier";
+
+export = HtmlWebpackPlugin;
+
+declare class HtmlWebpackPlugin {
+  constructor(options?: HtmlWebpackPlugin.Options);
+
+  apply(compiler: Compiler): void;
+}
+
+declare namespace HtmlWebpackPlugin {
+  type MinifyOptions = HtmlMinifierOptions;
+
+  interface Options extends Partial<ProcessedOptions> {}
+
+  /**
+   * The plugin options after adding default values
+   */
+  interface ProcessedOptions {
+    /**
+     * Emit the file only if it was changed.
+     * Default: `true`.
+     */
+    cache: boolean;
+    /**
+     * List all entries which should be injected
+     */
+    chunks: "all" | string[];
+    /**
+     * Allows to control how chunks should be sorted before they are included to the html.
+     * Default: `'auto'`.
+     */
+    chunksSortMode:
+      | "auto"
+      | "manual"
+      | (((entryNameA: string, entryNameB: string) => number));
+    /**
+     * List all entries which should not be injeccted
+     */
+    excludeChunks: string[];
+    /**
+     * Path to the favicon icon
+     */
+    favicon: false | string;
+    /**
+     * The file to write the HTML to.
+     * Defaults to `index.html`.
+     * Supports subdirectories eg: `assets/admin.html`
+     */
+    filename: string;
+    /**
+     * If `true` then append a unique `webpack` compilation hash to all included scripts and CSS files.
+     * This is useful for cache busting
+     */
+    hash: boolean;
+    /**
+     * Inject all assets into the given `template` or `templateContent`.
+     */
+    inject:
+      | false // Don't inject scripts
+      | true // Inject scripts into body
+      | "body" // Inject scripts into body
+      | "head"; // Inject scripts into head
+    /**
+     * Inject meta tags
+     */
+    meta:
+      | false // Disable injection
+      | {
+          [name: string]:
+            | string
+            | false // name content pair e.g. {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`
+            | { [attributeName: string]: string | boolean }; // custom properties e.g. { name:"viewport" content:"width=500, initial-scale=1" }
+        };
+    /**
+     * HTML Minification options accepts the following valeus:
+     * - 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
+     */
+    minify: 'auto' | boolean | MinifyOptions;
+    /**
+     * Render errors into the HTML page
+     */
+    showErrors: boolean;
+    /**
+     * The `webpack` require path to the template.
+     * @see https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md
+     */
+    template: string;
+    /**
+     * Allow to use a html string instead of reading from a file
+     */
+    templateContent:
+      | false // Use the template option instead to load a file
+      | string
+      | Promise<string>;
+    /**
+     * Allows to overwrite the parameters used in the template
+     */
+    templateParameters:
+      | false // Pass an empty object to the template function
+      | ((
+          compilation: any,
+          assets: {
+            publicPath: string;
+            js: Array<string>;
+            css: Array<string>;
+            manifest?: string;
+            favicon?: string;
+          },
+          assetTags: {
+            headTags: HtmlTagObject[];
+            bodyTags: HtmlTagObject[];
+          },
+          options: ProcessedOptions
+        ) => { [option: string]: any } | Promise<{ [option: string]: any }>)
+      | { [option: string]: any };
+    /**
+     * The title to use for the generated HTML document
+     */
+    title: string;
+    /**
+     * Enforce self closing tags e.g. <link />
+     */
+    xhtml: boolean;
+    /**
+     * In addition to the options actually used by this plugin, you can use this hash to pass arbitrary data through
+     * to your template.
+     */
+    [option: string]: any;
+  }
+
+  /**
+   * The values which are available during template execution
+   *
+   * Please keep in mind that the `templateParameter` options allows to change them
+   */
+  interface TemplateParameter {
+    compilation: any;
+    htmlWebpackPlugin: {
+      tags: {
+        headTags: HtmlTagObject[];
+        bodyTags: HtmlTagObject[];
+      };
+      files: {
+        publicPath: string;
+        js: Array<string>;
+        css: Array<string>;
+        manifest?: string;
+        favicon?: string;
+      };
+      options: Options;
+    };
+    webpackConfig: any;
+  }
+
+  interface Hooks {
+    alterAssetTags: AsyncSeriesWaterfallHook<{
+      assetTags: {
+        scripts: HtmlTagObject[];
+        styles: HtmlTagObject[];
+        meta: HtmlTagObject[];
+      };
+      outputName: string;
+      plugin: HtmlWebpackPlugin;
+    }>;
+
+    alterAssetTagGroups: AsyncSeriesWaterfallHook<{
+      headTags: HtmlTagObject[];
+      bodyTags: HtmlTagObject[];
+      outputName: string;
+      plugin: HtmlWebpackPlugin;
+    }>;
+
+    afterTemplateExecution: AsyncSeriesWaterfallHook<{
+      html: string;
+      headTags: HtmlTagObject[];
+      bodyTags: HtmlTagObject[];
+      outputName: string;
+      plugin: HtmlWebpackPlugin;
+    }>;
+
+    beforeAssetTagGeneration: AsyncSeriesWaterfallHook<{
+      assets: {
+        publicPath: string;
+        js: Array<string>;
+        css: Array<string>;
+        favicon?: string;
+        manifest?: string;
+      };
+      outputName: string;
+      plugin: HtmlWebpackPlugin;
+    }>;
+
+    beforeEmit: AsyncSeriesWaterfallHook<{
+      html: string;
+      outputName: string;
+      plugin: HtmlWebpackPlugin;
+    }>;
+
+    afterEmit: AsyncSeriesWaterfallHook<{
+      outputName: string;
+      plugin: HtmlWebpackPlugin;
+    }>;
+  }
+
+  /**
+   * A tag element according to the htmlWebpackPlugin object notation
+   */
+  interface HtmlTagObject {
+    /**
+     * Attributes of the html tag
+     * E.g. `{'disabled': true, 'value': 'demo'}`
+     */
+    attributes: {
+      [attributeName: string]: string | boolean;
+    };
+    /**
+     * The tag name e.g. `'div'`
+     */
+    tagName: string;
+    /**
+     * The inner HTML
+     */
+    innerHTML?: string;
+        /**
+     * Whether this html must not contain innerHTML
+     * @see https://www.w3.org/TR/html5/syntax.html#void-elements
+     */
+    voidTag: boolean;
+  }
+}