html-webpack-plugin 4.0.0-beta.2 → 4.0.0-beta.8

package/README.md

@@ -77,6 +77,7 @@ The `html-webpack-plugin` provides [hooks](https://github.com/jantimon/html-webp
  * [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
@@ -84,9 +85,9 @@ The `html-webpack-plugin` provides [hooks](https://github.com/jantimon/html-webp
  * [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 compatability with "strict mode". 
- 
+ * [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.
 
 
 <h2 align="center">Usage</h2>
@@ -128,7 +129,7 @@ This will generate a file `dist/index.html` containing the following
 
 If you have multiple `webpack` entry points, they will all be included with `script` tags in the generated HTML.
 
-If you have any CSS assets in webpack's output (for example, CSS extracted with the [ExtractTextPlugin](https://github.com/webpack/extract-text-webpack-plugin))
+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.
@@ -140,21 +141,22 @@ Allowed values are as follows
 
 |Name|Type|Default|Description|
 |:--:|:--:|:-----:|:----------|
-|**[`title`](#)**|`{String}`|`Webpack App`|The title to use for the generated HTML document|
-|**[`filename`](#)**|`{String}`|`'index.html'`|The file to write the HTML to. Defaults to `index.html`. You can specify a subdirectory here too (eg: `assets/admin.html`)|
-|**[`template`](#)**|`{String}`|``|`webpack` require path to the template. Please see the [docs](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md) for details|
-|**[`templateParameters`](#)**|`{Boolean\|Object\|Function}`|``| Allows to overwrite the parameters used in the template |
-|**[`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|
-|**[`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'}`|
-|**[`minify`](#)**|`{Boolean\|Object}`|`true` if `mode` is `'production'`, otherwise `false`|Controls if and in what ways the output should be minified. See [minification](#minification) below for more details.|
-|**[`hash`](#)**|`{Boolean}`|`false`|If `true` then append a unique `webpack` compilation hash to all included scripts and CSS files. This is useful for cache busting|
-|**[`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)|
+|**`title`**|`{String}`|`Webpack App`|The title to use for the generated HTML document|
+|**`filename`**|`{String}`|`'index.html'`|The file to write the HTML to. Defaults to `index.html`. You can specify a subdirectory here too (eg: `assets/admin.html`)|
+|**`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|
+|**`templateParameters`**|`{Boolean\|Object\|Function}`|``| Allows to overwrite the parameters used in the template |
+|**`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|
+|**`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'}`|
+|**`base`**|`{Object\|String\|false}`|`false`|Inject a [`base`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag. E.g. `base: "https://example.com/path/page.html`|
+|**`minify`**|`{Boolean\|Object}`|`true` if `mode` is `'production'`, otherwise `false`|Controls if and in what ways the output should be minified. See [minification](#minification) below for more details.|
+|**`hash`**|`{Boolean}`|`false`|If `true` then append a unique `webpack` compilation hash to all included scripts and CSS files. This is useful for cache busting|
+|**`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' \| 'dependency' \| '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)|
+|**`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)|
 
 Here's an example webpack config illustrating how to use these options
 
@@ -205,11 +207,13 @@ your own template. The easiest way is to use the `template` option and pass a cu
 The html-webpack-plugin will automatically inject all necessary CSS, JS, manifest
 and favicon files into the markup.
 
+Details of other template loaders are [documented here](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md).
+
 ```js
 plugins: [
   new HtmlWebpackPlugin({
     title: 'Custom template',
-    // Load a custom template (lodash by default see the FAQ for details)
+    // Load a custom template (lodash by default)
     template: 'index.html'
   })
 ]
@@ -336,7 +340,7 @@ and the following options:
 To use custom [html-minifier options](https://github.com/kangax/html-minifier#options-quick-reference)
 pass an object to `minify` instead. This object will not be merged with the defaults above.
 
-To disable minifcations during production mode set the `minfy` option to `false`.
+To disable minification during production mode set the `minify` option to `false`.
 
 ### Meta Tags
 
@@ -354,10 +358,12 @@ To add those use a key/value pair:
 ```js
 plugins: [
   new HtmlWebpackPlugin({
-    'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no',
-    // Will generate: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    'theme-color': '#4285f4'
-    // Will generate: <meta name="theme-color" content="#4285f4">
+      'meta': {
+        'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no',
+        // Will generate: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        'theme-color': '#4285f4'
+        // Will generate: <meta name="theme-color" content="#4285f4">
+      }
   })
 ]
 ```
@@ -383,6 +389,63 @@ plugins: [
 ]
 ```
 
+### Base Tag
+
+When the `base` option is used,
+html-webpack-plugin will inject a [base tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base).
+By default, a base tag will not be injected.
+
+The following two are identical and will both insert `<base href="http://example.com/some/page.html">`:
+
+```js
+new HtmlWebpackPlugin({
+  'base': 'http://example.com/some/page.html'
+})
+```
+
+```js
+new HtmlWebpackPlugin({
+  'base': { 'href': 'http://example.com/some/page.html' }
+})
+```
+
+The `target` can be specified with the corresponding key:
+
+```js
+new HtmlWebpackPlugin({
+  'base': {
+    'href': 'http://example.com/some/page.html',
+    'target': '_blank'
+  }
+})
+```
+
+which will inject the element `<base href="http://example.com/some/page.html" target="_blank">`.
+
+### Long Term Caching
+
+For long term caching add `contenthash/templatehash` to the filename.
+
+**Example:**
+
+```js
+plugins: [
+  new HtmlWebpackPlugin({
+    filename: 'index.[contenthash].html'
+  })
+]
+```
+
+`contenthash/templatehash` is the hash of the content of the output file.
+
+Optionally, You can configure like `[<hashType>:contenthash:<digestType>:<length>]`
+
+* `hashType` - one of `sha1`, `md5`, `sha256`, `sha512`  or any other node.js supported hash type
+* `digestType` - one of `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
+* `maxlength` - maximum length of the generated hash in chars
+
+**Defaults:** `[md5:contenthash:hex:9999]`
+
 ### Events
 
 To allow other [plugins](https://github.com/webpack/docs/wiki/plugins) to alter the HTML this plugin executes
@@ -471,7 +534,8 @@ Example implementation: [webpack-subresource-integrity](https://www.npmjs.com/pa
 ```js
 // If your plugin is direct dependent to the html webpack plugin:
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-// If your plugins is using html-webpack-plugin you can use https://github.com/tallesl/node-safe-require
+// If your plugin is using html-webpack-plugin as an optional dependency
+// you can use https://github.com/tallesl/node-safe-require instead:
 const HtmlWebpackPlugin = require('safe-require')('html-webpack-plugin');
 
 class MyPlugin {
@@ -479,7 +543,7 @@ class MyPlugin {
     compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
       console.log('The compiler is starting a new compilation...')
 
-      // Staic Plugin interface |compilation |HOOK NAME | register listener 
+      // Static Plugin interface |compilation |HOOK NAME | register listener 
       HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
         'MyPlugin', // <-- Set a meaningful name here for stacktraces
         (data, cb) => {

package/index.js

@@ -1,8 +1,9 @@
 // @ts-check
 // Import types
-/* eslint-disable */
-/// <reference path="./typings.d.ts" />
-/* eslint-enable */
+/** @typedef {import("./typings").HtmlTagObject} HtmlTagObject */
+/** @typedef {import("./typings").Options} HtmlWebpackOptions */
+/** @typedef {import("./typings").ProcessedOptions} ProcessedHtmlWebpackOptions */
+/** @typedef {import("./typings").TemplateParameter} TemplateParameter */
 /** @typedef {import("webpack/lib/Compiler.js")} WebpackCompiler */
 /** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
 'use strict';
@@ -28,16 +29,16 @@ const fsReadFileAsync = promisify(fs.readFile);
 
 class HtmlWebpackPlugin {
   /**
-   * @param {Partial<HtmlWebpackPluginOptions>} [options]
+   * @param {HtmlWebpackOptions} [options]
    */
   constructor (options) {
-    /** @type {Partial<HtmlWebpackPluginOptions>} */
+    /** @type {HtmlWebpackOptions} */
     const userOptions = options || {};
 
     // Default options
-    /** @type {HtmlWebpackPluginOptions} */
+    /** @type {ProcessedHtmlWebpackOptions} */
     const defaultOptions = {
-      template: path.join(__dirname, 'default_index.ejs'),
+      template: 'auto',
       templateContent: false,
       templateParameters: templateParametersGenerator,
       filename: 'index.html',
@@ -45,18 +46,19 @@ class HtmlWebpackPlugin {
       inject: true,
       compile: true,
       favicon: false,
-      minify: undefined,
+      minify: 'auto',
       cache: true,
       showErrors: true,
       chunks: 'all',
       excludeChunks: [],
       chunksSortMode: 'auto',
       meta: {},
+      base: false,
       title: 'Webpack App',
       xhtml: false
     };
 
-    /** @type {HtmlWebpackPluginOptions} */
+    /** @type {ProcessedHtmlWebpackOptions} */
     this.options = Object.assign(defaultOptions, userOptions);
 
     // Default metaOptions if no template is provided
@@ -111,7 +113,8 @@ class HtmlWebpackPlugin {
     const isProductionLikeMode = compiler.options.mode === 'production' || !compiler.options.mode;
 
     const minify = this.options.minify;
-    if (minify === true || (minify === undefined && isProductionLikeMode)) {
+    if (minify === true || (minify === 'auto' && isProductionLikeMode)) {
+      /** @type { import('html-minifier').Options } */
       this.options.minify = {
         // https://github.com/kangax/html-minifier#options-quick-reference
         collapseWhitespace: true,
@@ -216,11 +219,12 @@ class HtmlWebpackPlugin {
         // Turn the js and css paths into grouped HtmlTagObjects
         const assetTagGroupsPromise = assetsPromise
           // And allow third-party-plugin authors to reorder and change the assetTags before they are grouped
-          .then(({assets}) => getHtmlWebpackPluginHooks(compilation).alterAssetTags.promise({
+          .then(({ assets }) => getHtmlWebpackPluginHooks(compilation).alterAssetTags.promise({
             assetTags: {
               scripts: self.generatedScriptTags(assets.js),
               styles: self.generateStyleTags(assets.css),
               meta: [
+                ...self.generateBaseTag(self.options.base),
                 ...self.generatedMetaTags(self.options.meta),
                 ...self.generateFaviconTags(assets.favicon)
               ]
@@ -228,7 +232,7 @@ class HtmlWebpackPlugin {
             outputName: childCompilationOutputName,
             plugin: self
           }))
-          .then(({assetTags}) => {
+          .then(({ assetTags }) => {
             // Inject scripts to body unless it set explictly to head
             const scriptTarget = self.options.inject === 'head' ? 'head' : 'body';
             // Group assets to `head` and `body` tag arrays
@@ -263,17 +267,17 @@ class HtmlWebpackPlugin {
         const injectedHtmlPromise = Promise.all([assetTagGroupsPromise, templateExectutionPromise])
           // Allow plugins to change the html before assets are injected
           .then(([assetTags, html]) => {
-            const pluginArgs = {html, headTags: assetTags.headTags, bodyTags: assetTags.bodyTags, plugin: self, outputName: childCompilationOutputName};
+            const pluginArgs = { html, headTags: assetTags.headTags, bodyTags: assetTags.bodyTags, plugin: self, outputName: childCompilationOutputName };
             return getHtmlWebpackPluginHooks(compilation).afterTemplateExecution.promise(pluginArgs);
           })
-          .then(({html, headTags, bodyTags}) => {
-            return self.postProcessHtml(html, assets, {headTags, bodyTags});
+          .then(({ html, headTags, bodyTags }) => {
+            return self.postProcessHtml(html, assets, { headTags, bodyTags });
           });
 
         const emitHtmlPromise = injectedHtmlPromise
           // Allow plugins to change the html after assets are injected
           .then((html) => {
-            const pluginArgs = {html, plugin: self, outputName: childCompilationOutputName};
+            const pluginArgs = { html, plugin: self, outputName: childCompilationOutputName };
             return getHtmlWebpackPluginHooks(compilation).beforeEmit.promise(pluginArgs)
               .then(result => result.html);
           })
@@ -329,8 +333,8 @@ 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 vmScript = new vm.Script(source, {filename: template});
+    const vmContext = vm.createContext(_.extend({ HTML_WEBPACK_PLUGIN: true, require: require }, global));
+    const vmScript = new vm.Script(source, { filename: template });
     // Evaluate code and cast to string
     let newSource;
     try {
@@ -381,7 +385,7 @@ class HtmlWebpackPlugin {
   /**
    * This function renders the actual html by executing the template function
    *
-   * @param {(templatePArameters) => string | Promise<string>} templateFunction
+   * @param {(templateParameters) => string | Promise<string>} templateFunction
    * @param {{
       publicPath: string,
       js: Array<string>,
@@ -433,7 +437,7 @@ class HtmlWebpackPlugin {
     const htmlAfterInjection = this.options.inject
       ? this.injectAssetsIntoHtml(html, assets, assetTags)
       : html;
-    const htmlAfterMinification = this.options.minify
+    const htmlAfterMinification = typeof this.options.minify === 'object'
       ? require('html-minifier').minify(htmlAfterInjection, this.options.minify)
       : htmlAfterInjection;
     return Promise.resolve(htmlAfterMinification);
@@ -524,21 +528,6 @@ class HtmlWebpackPlugin {
     return assets.js.length && assets.js.every((assetPath) => /\.hot-update\.js$/.test(assetPath));
   }
 
-  /**
-   * Return true if PATH is an absolute url path, otherwise false
-   *
-   * @param {string | undefined} path
-   */
-  isAbsolutePath (path) {
-    if (typeof path === 'undefined' || path === '') return false;
-    // If the path start with '/'
-    if (path.indexOf('/') === 0) return true;
-    // If the path contain the '://' scheme
-    if (path.indexOf('://') !== -1) return true;
-
-    return false;
-  }
-
   /**
    * The htmlWebpackPluginAssets extracts the asset information of a webpack compilation
    * for all given entry names
@@ -557,13 +546,15 @@ class HtmlWebpackPlugin {
 
     /**
      * @type {string} the configured public path to the asset root
-     * if the absolute path publicPath is set in the current webpack config use it otherwise
+     * if a path publicPath is set in the current webpack config use it otherwise
      * fallback to a realtive path
      */
-    let publicPath = this.isAbsolutePath(compilation.options.output.publicPath)
-      // If the absolute path is set in the publicPath use it
-      ? compilation.mainTemplate.getPublicPath({hash: compilationHash})
-      // If publicPath was a relative path get the realtive 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('/');
 
@@ -583,7 +574,7 @@ class HtmlWebpackPlugin {
     const assets = {
       // The public path
       publicPath: publicPath,
-      // Will contain all js files
+      // Will contain all js and mjs files
       js: [],
       // Will contain all css files
       css: [],
@@ -598,9 +589,9 @@ class HtmlWebpackPlugin {
       assets.manifest = this.appendHash(assets.manifest, compilationHash);
     }
 
-    // Extract paths to .js and .css files from the current compilation
+    // Extract paths to .js, .mjs and .css files from the current compilation
     const entryPointPublicPathMap = {};
-    const extensionRegexp = /\.(css|js)(\?|$)/;
+    const extensionRegexp = /\.(css|js|mjs)(\?|$)/;
     for (let i = 0; i < entryNames.length; i++) {
       const entryName = entryNames[i];
       const entryPointFiles = compilation.entrypoints.get(entryName).getFiles();
@@ -617,7 +608,7 @@ class HtmlWebpackPlugin {
 
       entryPointPublicPaths.forEach((entryPointPublicPath) => {
         const extMatch = extensionRegexp.exec(entryPointPublicPath);
-        // Skip if the public path is not a .css or .js file
+        // Skip if the public path is not a .css, .mjs or .js file
         if (!extMatch) {
           return;
         }
@@ -627,8 +618,8 @@ class HtmlWebpackPlugin {
           return;
         }
         entryPointPublicPathMap[entryPointPublicPath] = true;
-        // ext will contain .js or .css
-        const ext = extMatch[1];
+        // ext will contain .js or .css, because .mjs recognizes as .js
+        const ext = extMatch[1] === 'mjs' ? 'js' : extMatch[1];
         assets[ext].push(entryPointPublicPath);
       });
     }
@@ -641,7 +632,7 @@ class HtmlWebpackPlugin {
    *
    * @param {string|false} faviconFilePath
    * @param {WebpackCompilation} compilation
-   * @parma {string} publicPath
+   * @param {string} publicPath
    * @returns {Promise<string|undefined>}
    */
   getFaviconPublicPath (faviconFilePath, compilation, publicPath) {
@@ -724,6 +715,28 @@ class HtmlWebpackPlugin {
     }));
   }
 
+  /**
+   * Generate an optional base tag
+   * @param { false
+            | string
+            | {[attributeName: string]: string} // attributes e.g. { href:"http://example.com/page.html" target:"_blank" }
+            } baseOption
+  * @returns {Array<HtmlTagObject>}
+  */
+  generateBaseTag (baseOption) {
+    if (baseOption === false) {
+      return [];
+    } else {
+      return [{
+        tagName: 'base',
+        voidTag: true,
+        attributes: (typeof baseOption === 'string') ? {
+          href: baseOption
+        } : baseOption
+      }];
+    }
+  }
+
   /**
    * Generate all meta tags for the given meta configuration
    * @param {false | {
@@ -890,11 +903,17 @@ class HtmlWebpackPlugin {
   /**
    * Helper to return the absolute template path with a fallback loader
    * @param {string} template
-   * The path to the tempalate e.g. './index.html'
+   * The path to the template e.g. './index.html'
    * @param {string} context
    * The webpack base resolution path for relative paths e.g. process.cwd()
    */
   getFullTemplatePath (template, context) {
+    if (template === 'auto') {
+      template = path.resolve(context, 'src/index.ejs');
+      if (!fs.existsSync(template)) {
+        template = path.join(__dirname, 'default_index.ejs');
+      }
+    }
     // If the template doesn't use a loader use the lodash template loader
     if (template.indexOf('!') === -1) {
       template = require.resolve('./lib/loader.js') + '!' + path.resolve(context, template);
@@ -933,8 +952,8 @@ class HtmlWebpackPlugin {
      headTags: HtmlTagObject[],
      bodyTags: HtmlTagObject[]
    }} assetTags
- * @param {HtmlWebpackPluginOptions} options
- * @returns {HtmlWebpackPluginTemplateParameter}
+ * @param {ProcessedHtmlWebpackOptions} options
+ * @returns {TemplateParameter}
  */
 function templateParametersGenerator (compilation, assets, assetTags, options) {
   const xhtml = options.xhtml;

package/lib/compiler.js

@@ -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) {
@@ -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>}}
  */

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,10 +10,9 @@
 
 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: {
@@ -28,7 +25,6 @@ const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
       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,10 +1,11 @@
 {
   "name": "html-webpack-plugin",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.8",
   "license": "MIT",
   "description": "Simplifies creation of HTML files to serve your webpack bundles",
   "author": "Jan Nicklas <j.nicklas@me.com> (https://github.com/jantimon)",
   "main": "index.js",
+  "types": "typings.d.ts",
   "files": [
     "lib/",
     "index.js",
@@ -27,34 +28,35 @@
     ]
   },
   "devDependencies": {
+    "@types/html-minifier": "3.5.3",
     "@types/loader-utils": "1.1.3",
-    "@types/node": "10.11.4",
+    "@types/node": "11.13.9",
     "@types/tapable": "1.0.4",
-    "appcache-webpack-plugin": "^1.4.0",
-    "commitizen": "3.0.2",
-    "css-loader": "^1.0.0",
+    "appcache-webpack-plugin": "1.4.0",
+    "commitizen": "3.1.1",
+    "css-loader": "2.1.1",
     "cz-conventional-changelog": "2.1.0",
-    "dir-compare": "1.4.0",
-    "file-loader": "^2.0.0",
-    "html-loader": "^0.5.5",
-    "jest": "23.6.0",
-    "mini-css-extract-plugin": "^0.4.3",
+    "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.6.2",
-    "semistandard": "12.0.1",
-    "standard-version": "^4.4.0",
-    "style-loader": "^0.23.0",
-    "typescript": "^2.9.2",
-    "webpack": "^4.20.2",
-    "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": {
-    "html-minifier": "^3.5.20",
-    "loader-utils": "^1.1.0",
+    "html-minifier": "^4.0.0",
+    "loader-utils": "^1.2.3",
     "lodash": "^4.17.11",
     "pretty-error": "^2.1.1",
-    "tapable": "^1.1.0",
+    "tapable": "^1.1.3",
     "util.promisify": "1.0.0"
   },
   "peerDependencies": {

package/typings.d.ts

@@ -1,139 +1,236 @@
+import { AsyncSeriesWaterfallHook } from "tapable";
+import { Compiler } from 'webpack';
+import { Options as HtmlMinifierOptions } from "html-minifier";
 
-/**
- * The plugin options
- */
-interface HtmlWebpackPluginOptions {
+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 {
     /**
-     * The title to use for the generated HTML document
+     * Emit the file only if it was changed.
+     * Default: `true`.
      */
-    title: string,
+    cache: boolean;
     /**
-     * The `webpack` require path to the template.
-     * @see https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md
+     * List all entries which should be injected
      */
-    template: string,
+    chunks: "all" | string[];
     /**
-     * Allow to use a html string instead of reading from a file
+     * Allows to control how chunks should be sorted before they are included to the html.
+     * Default: `'auto'`.
      */
-    templateContent:
-      false // Use the template option instead to load a file
-      | string
-      | Promise<string>,
+    chunksSortMode:
+      | "auto"
+      | "manual"
+      | (((entryNameA: string, entryNameB: string) => number));
     /**
-     * Allows to overwrite the parameters used in the template
+     * List all entries which should not be injeccted
      */
-    templateParameters:
-      false // Pass an empty object to the template function
-      | ((compilation: any, assets, assetTags: { headTags: Array<HtmlTagObject>, bodyTags: Array<HtmlTagObject> }, options: HtmlWebpackPluginOptions) => {[option: string]: any})
-      | ((compilation: any, assets, assetTags: { headTags: Array<HtmlTagObject>, bodyTags: Array<HtmlTagObject> }, options: HtmlWebpackPluginOptions) => Promise<{[option: string]: any}>)
-      | {[option: string]: any}
+    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,
+    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,
+    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:
+      | false // Don't inject scripts
+      | true // Inject scripts into body
+      | "body" // Inject scripts into body
+      | "head"; // Inject scripts into head
     /**
-     * Path to the favicon icon
+     * Inject meta tags
      */
-    favicon: false | string,
+    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
+     * 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?: boolean | {},
-    cache: boolean,
+    minify: 'auto' | boolean | MinifyOptions;
     /**
      * Render errors into the HTML page
      */
-    showErrors: boolean,
+    showErrors: boolean;
     /**
-     * List all entries which should be injected
+     * The `webpack` require path to the template.
+     * @see https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md
      */
-    chunks: 'all' | string[],
+    template: string;
     /**
-     * List all entries which should not be injeccted
+     * Allow to use a html string instead of reading from a file
      */
-    excludeChunks: string[],
-    chunksSortMode: 'auto' | 'manual' | (((entryNameA: string, entryNameB: string) => number)),
+    templateContent:
+      | false // Use the template option instead to load a file
+      | string
+      | Promise<string>;
     /**
-     * Inject meta tags
+     * Allows to overwrite the parameters used in the template
      */
-    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" }
-      },
+    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
-
+    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;
-}
+  }
 
-/**
- * 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
-  },
-  /**
-   * Wether this html must not contain innerHTML
-   * @see https://www.w3.org/TR/html5/syntax.html#void-elements
-   */
-  voidTag: boolean,
   /**
-   * The tag name e.g. `'div'`
+   * The values which are available during template execution
+   *
+   * Please keep in mind that the `templateParameter` options allows to change them
    */
-  tagName: string,
+  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;
+    }>;
+  }
+
   /**
-   * Inner HTML The
+   * A tag element according to the htmlWebpackPlugin object notation
    */
-  innerHTML?: string
-}
-
-/**
- * The values which are available during template execution
- *
- * Please keep in mind that the `templateParameter` options allows to change them
- */
-interface HtmlWebpackPluginTemplateParameter {
-  compilation: any,
-  webpackConfig: any
-  htmlWebpackPlugin: {
-    tags: {
-      headTags: HtmlTagObject[],
-      bodyTags: HtmlTagObject[]
-    },
-    files: {
-      publicPath: string,
-      js: Array<string>,
-      css: Array<string>,
-      manifest?: string,
-      favicon?: string
-    },
-    options: HtmlWebpackPluginOptions
+  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;
   }
 }