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

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: false,
+      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
@@ -99,6 +101,31 @@ class HtmlWebpackPlugin {
       this.options.filename = path.relative(compiler.options.output.path, filename);
     }
 
+    // `contenthash` is introduced in webpack v4.3
+    // which conflicts with the plugin's existing `contenthash` method,
+    // hence it is renamed to `templatehash` to avoid conflicts
+    this.options.filename = this.options.filename.replace(/\[(?:(\w+):)?contenthash(?::([a-z]+\d*))?(?::(\d+))?\]/ig, (match) => {
+      return match.replace('contenthash', 'templatehash');
+    });
+
+    // Check if webpack is running in production mode
+    // @see https://github.com/webpack/webpack/blob/3366421f1784c449f415cda5930a8e445086f688/lib/WebpackOptionsDefaulter.js#L12-L14
+    const isProductionLikeMode = compiler.options.mode === 'production' || !compiler.options.mode;
+
+    const minify = this.options.minify;
+    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,
+        removeComments: true,
+        removeRedundantAttributes: true,
+        removeScriptTypeAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        useShortDoctype: true
+      };
+    }
+
     // Clear the cache once a new HtmlWebpackPlugin is added
     childCompiler.clearCache(compiler);
 
@@ -192,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)
               ]
@@ -204,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
@@ -237,51 +265,51 @@ class HtmlWebpackPlugin {
             : self.executeTemplate(compilationResult, assetsHookResult.assets, { headTags: assetTags.headTags, bodyTags: assetTags.bodyTags }, compilation));
 
         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};
-              return getHtmlWebpackPluginHooks(compilation).afterTemplateExecution.promise(pluginArgs);
-            })
-            .then(({html, headTags, bodyTags}) => {
-              return self.postProcessHtml(html, assets, {headTags, bodyTags});
-            });
+          // 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 };
+            return getHtmlWebpackPluginHooks(compilation).afterTemplateExecution.promise(pluginArgs);
+          })
+          .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};
-              return getHtmlWebpackPluginHooks(compilation).beforeEmit.promise(pluginArgs)
-                .then(result => result.html);
-            })
-            .catch(err => {
-              // In case anything went wrong the promise is resolved
-              // with the error message and an error is logged
-              compilation.errors.push(prettyError(err, compiler.context).toString());
-              // Prevent caching
-              self.hash = null;
-              return self.options.showErrors ? prettyError(err, compiler.context).toHtml() : 'ERROR';
-            })
-            .then(html => {
-              // Allow to use [contenthash] as placeholder for the html-webpack-plugin name
-              // See also https://survivejs.com/webpack/optimizing/adding-hashes-to-filenames/
-              // From https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/8de6558e33487e7606e7cd7cb2adc2cccafef272/src/index.js#L212-L214
-              const finalOutputName = childCompilationOutputName.replace(/\[(?:(\w+):)?contenthash(?::([a-z]+\d*))?(?::(\d+))?\]/ig, (_, hashType, digestType, maxLength) => {
-                return loaderUtils.getHashDigest(Buffer.from(html, 'utf8'), hashType, digestType, parseInt(maxLength, 10));
-              });
+          // Allow plugins to change the html after assets are injected
+          .then((html) => {
+            const pluginArgs = { html, plugin: self, outputName: childCompilationOutputName };
+            return getHtmlWebpackPluginHooks(compilation).beforeEmit.promise(pluginArgs)
+              .then(result => result.html);
+          })
+          .catch(err => {
+            // In case anything went wrong the promise is resolved
+            // with the error message and an error is logged
+            compilation.errors.push(prettyError(err, compiler.context).toString());
+            // Prevent caching
+            self.hash = null;
+            return self.options.showErrors ? prettyError(err, compiler.context).toHtml() : 'ERROR';
+          })
+          .then(html => {
+            // Allow to use [templatehash] as placeholder for the html-webpack-plugin name
+            // See also https://survivejs.com/webpack/optimizing/adding-hashes-to-filenames/
+            // From https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/8de6558e33487e7606e7cd7cb2adc2cccafef272/src/index.js#L212-L214
+            const finalOutputName = childCompilationOutputName.replace(/\[(?:(\w+):)?templatehash(?::([a-z]+\d*))?(?::(\d+))?\]/ig, (_, hashType, digestType, maxLength) => {
+              return loaderUtils.getHashDigest(Buffer.from(html, 'utf8'), hashType, digestType, parseInt(maxLength, 10));
+            });
               // Add the evaluated html code to the webpack assets
-              compilation.assets[finalOutputName] = {
-                source: () => html,
-                size: () => html.length
-              };
-              return finalOutputName;
-            })
-            .then((finalOutputName) => getHtmlWebpackPluginHooks(compilation).afterEmit.promise({
-              outputName: finalOutputName,
-              plugin: self
-            }).catch(err => {
-              console.error(err);
-              return null;
-            }).then(() => null));
+            compilation.assets[finalOutputName] = {
+              source: () => html,
+              size: () => html.length
+            };
+            return finalOutputName;
+          })
+          .then((finalOutputName) => getHtmlWebpackPluginHooks(compilation).afterEmit.promise({
+            outputName: finalOutputName,
+            plugin: self
+          }).catch(err => {
+            console.error(err);
+            return null;
+          }).then(() => null));
 
         // Once all files are added to the webpack compilation
         // let the webpack compiler continue
@@ -299,14 +327,14 @@ class HtmlWebpackPlugin {
    */
   evaluateCompilationResult (compilation, source) {
     if (!source) {
-      return Promise.reject('The child compilation didn\'t provide a result');
+      return Promise.reject(new Error('The child compilation didn\'t provide a result'));
     }
     // The LibraryTemplatePlugin stores the template result in a local variable.
     // 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 {
@@ -319,7 +347,7 @@ class HtmlWebpackPlugin {
     }
     return typeof newSource === 'string' || typeof newSource === 'function'
       ? Promise.resolve(newSource)
-      : Promise.reject('The loader "' + this.options.template + '" didn\'t return html.');
+      : Promise.reject(new Error('The loader "' + this.options.template + '" didn\'t return html.'));
   }
 
   /**
@@ -327,8 +355,8 @@ class HtmlWebpackPlugin {
    * @param {WebpackCompilation} compilation
    * @param {{
       publicPath: string,
-      js: Array<{entryName: string, path: string}>,
-      css: Array<{entryName: string, path: string}>,
+      js: Array<string>,
+      css: Array<string>,
       manifest?: string,
       favicon?: string
     }} assets
@@ -336,17 +364,24 @@ class HtmlWebpackPlugin {
        headTags: HtmlTagObject[],
        bodyTags: HtmlTagObject[]
      }} assetTags
-   * @returns {{[key: any]: any}}
+   * @returns {Promise<{[key: any]: any}>}
    */
   getTemplateParameters (compilation, assets, assetTags) {
-    if (this.options.templateParameters === false) {
-      return {};
+    const templateParameters = this.options.templateParameters;
+    if (templateParameters === false) {
+      return Promise.resolve({});
     }
-    if (typeof this.options.templateParameters === 'function') {
-      return this.options.templateParameters(compilation, assets, assetTags, this.options);
+    if (typeof templateParameters === 'function') {
+      const preparedAssetTags = {
+        headTags: this.prepareAssetTagGroupForRendering(assetTags.headTags),
+        bodyTags: this.prepareAssetTagGroupForRendering(assetTags.bodyTags)
+      };
+      return Promise
+        .resolve()
+        .then(() => templateParameters(compilation, assets, preparedAssetTags, this.options));
     }
-    if (typeof this.options.templateParameters === 'object') {
-      return this.options.templateParameters;
+    if (typeof templateParameters === 'object') {
+      return Promise.resolve(templateParameters);
     }
     throw new Error('templateParameters has to be either a function or an object');
   }
@@ -354,11 +389,11 @@ 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<{entryName: string, path: string}>,
-      css: Array<{entryName: string, path: string}>,
+      js: Array<string>,
+      css: Array<string>,
       manifest?: string,
       favicon?: string
     }} assets
@@ -372,18 +407,17 @@ class HtmlWebpackPlugin {
    */
   executeTemplate (templateFunction, assets, assetTags, compilation) {
     // Template processing
-    const templateParams = this.getTemplateParameters(compilation, assets, assetTags);
-    /** @type {string|Promise<string>} */
-    let html = '';
-    try {
-      html = templateFunction(templateParams);
-    } catch (e) {
-      compilation.errors.push(new Error('Template execution failed: ' + e));
-      return Promise.reject(e);
-    }
-    // If html is a promise return the promise
-    // If html is a string turn it into a promise
-    return Promise.resolve().then(() => html);
+    const templateParamsPromise = this.getTemplateParameters(compilation, assets, assetTags);
+    return templateParamsPromise.then((templateParams) => {
+      try {
+        // If html is a promise return the promise
+        // If html is a string turn it into a promise
+        return templateFunction(templateParams);
+      } catch (e) {
+        compilation.errors.push(new Error('Template execution failed: ' + e));
+        return Promise.reject(e);
+      }
+    });
   }
 
   /**
@@ -402,13 +436,13 @@ class HtmlWebpackPlugin {
    */
   postProcessHtml (html, assets, assetTags) {
     if (typeof html !== 'string') {
-      return Promise.reject('Expected html to be a string but got ' + JSON.stringify(html));
+      return Promise.reject(new Error('Expected html to be a string but got ' + JSON.stringify(html)));
     }
     const htmlAfterInjection = this.options.inject
-          ? this.injectAssetsIntoHtml(html, assets, assetTags)
-          : html;
-    const htmlAfterMinification = this.options.minify
-      ? require('html-minifier').minify(htmlAfterInjection, this.options.minify === true ? {} : this.options.minify)
+      ? this.injectAssetsIntoHtml(html, assets, assetTags)
+      : html;
+    const htmlAfterMinification = typeof this.options.minify === 'object'
+      ? require('html-minifier-terser').minify(htmlAfterInjection, this.options.minify)
       : htmlAfterInjection;
     return Promise.resolve(htmlAfterMinification);
   }
@@ -488,14 +522,14 @@ class HtmlWebpackPlugin {
    *
    * @param {{
       publicPath: string,
-      js: Array<{entryName: string, path: string}>,
-      css: Array<{entryName: string, path: string}>,
+      js: Array<string>,
+      css: Array<string>,
       manifest?: string,
       favicon?: string
     }} assets
    */
   isHotUpdateCompilation (assets) {
-    return assets.js.length && assets.js.every(({entryName}) => /\.hot-update\.js$/.test(entryName));
+    return assets.js.length && assets.js.every((assetPath) => /\.hot-update\.js$/.test(assetPath));
   }
 
   /**
@@ -505,8 +539,8 @@ class HtmlWebpackPlugin {
    * @param {string[]} entryNames
    * @returns {{
       publicPath: string,
-      js: Array<{entryName: string, path: string}>,
-      css: Array<{entryName: string, path: string}>,
+      js: Array<string>,
+      css: Array<string>,
       manifest?: string,
       favicon?: string
     }}
@@ -516,12 +550,14 @@ class HtmlWebpackPlugin {
 
     /**
      * @type {string} the configured public path to the asset root
-     * if a 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 = typeof compilation.options.output.publicPath !== 'undefined'
+    const webpackPublicPath = compilation.mainTemplate.getPublicPath({ hash: compilationHash });
+    const isPublicPathDefined = webpackPublicPath.trim() !== '';
+    let publicPath = isPublicPathDefined
       // If a hard coded public path exists use it
-      ? compilation.mainTemplate.getPublicPath({hash: compilationHash})
+      ? 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('/');
@@ -533,8 +569,8 @@ class HtmlWebpackPlugin {
     /**
      * @type {{
         publicPath: string,
-        js: Array<{entryName: string, path: string}>,
-        css: Array<{entryName: string, path: string}>,
+        js: Array<string>,
+        css: Array<string>,
         manifest?: string,
         favicon?: string
       }}
@@ -542,7 +578,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: [],
@@ -557,8 +593,9 @@ class HtmlWebpackPlugin {
       assets.manifest = this.appendHash(assets.manifest, compilationHash);
     }
 
-    // Extract paths to .js and .css files from the current compilation
-    const extensionRegexp = /\.(css|js)(\?|$)/;
+    // Extract paths to .js, .mjs and .css files from the current compilation
+    const entryPointPublicPathMap = {};
+    const extensionRegexp = /\.(css|js|mjs)(\?|$)/;
     for (let i = 0; i < entryNames.length; i++) {
       const entryName = entryNames[i];
       const entryPointFiles = compilation.entrypoints.get(entryName).getFiles();
@@ -567,24 +604,27 @@ class HtmlWebpackPlugin {
       // E.g. bundle.js -> /bundle.js?hash
       const entryPointPublicPaths = entryPointFiles
         .map(chunkFile => {
-          const entryPointPublicPath = publicPath + chunkFile;
+          const entryPointPublicPath = publicPath + this.urlencodePath(chunkFile);
           return this.options.hash
             ? this.appendHash(entryPointPublicPath, compilationHash)
             : entryPointPublicPath;
         });
 
-      entryPointPublicPaths.forEach((entryPointPublicPaths) => {
-        const extMatch = extensionRegexp.exec(entryPointPublicPaths);
-        // Skip if the public path is not a .css or .js file
+      entryPointPublicPaths.forEach((entryPointPublicPath) => {
+        const extMatch = extensionRegexp.exec(entryPointPublicPath);
+        // Skip if the public path is not a .css, .mjs or .js file
         if (!extMatch) {
           return;
         }
-        // ext will contain .js or .css
-        const ext = extMatch[1];
-        assets[ext].push({
-          entryName: entryName,
-          path: entryPointPublicPaths
-        });
+        // Skip if this file is already known
+        // (e.g. because of common chunk optimizations)
+        if (entryPointPublicPathMap[entryPointPublicPath]) {
+          return;
+        }
+        entryPointPublicPathMap[entryPointPublicPath] = true;
+        // ext will contain .js or .css, because .mjs recognizes as .js
+        const ext = extMatch[1] === 'mjs' ? 'js' : extMatch[1];
+        assets[ext].push(entryPointPublicPath);
       });
     }
     return assets;
@@ -596,7 +636,7 @@ class HtmlWebpackPlugin {
    *
    * @param {string|false} faviconFilePath
    * @param {WebpackCompilation} compilation
-   * @parma {string} publicPath
+   * @param {string} publicPath
    * @returns {Promise<string|undefined>}
    */
   getFaviconPublicPath (faviconFilePath, compilation, publicPath) {
@@ -626,14 +666,14 @@ class HtmlWebpackPlugin {
     // Turn { "viewport" : "width=500, initial-scale=1" } into
     // [{ name:"viewport" content:"width=500, initial-scale=1" }]
     const metaTagAttributeObjects = Object.keys(metaOptions)
-    .map((metaName) => {
-      const metaTagContent = metaOptions[metaName];
-      return (typeof metaTagContent === 'string') ? {
-        name: metaName,
-        content: metaTagContent
-      } : metaTagContent;
-    })
-    .filter((attribute) => attribute !== false);
+      .map((metaName) => {
+        const metaTagContent = metaOptions[metaName];
+        return (typeof metaTagContent === 'string') ? {
+          name: metaName,
+          content: metaTagContent
+        } : metaTagContent;
+      })
+      .filter((attribute) => attribute !== false);
     // Turn [{ name:"viewport" content:"width=500, initial-scale=1" }] into
     // the html-webpack-plugin tag structure
     return metaTagAttributeObjects.map((metaTagAttributes) => {
@@ -650,42 +690,64 @@ class HtmlWebpackPlugin {
 
   /**
    * Generate all tags script for the given file paths
-   * @param {Array<{ entryName: string; path: string; }>} jsAssets
+   * @param {Array<string>} jsAssets
    * @returns {Array<HtmlTagObject>}
    */
   generatedScriptTags (jsAssets) {
     return jsAssets.map(scriptAsset => ({
       tagName: 'script',
       voidTag: false,
-      entry: scriptAsset.entryName,
       attributes: {
-        src: scriptAsset.path
+        src: scriptAsset
       }
     }));
   }
 
   /**
    * Generate all style tags for the given file paths
-   * @param {Array<{ entryName: string; path: string; }>} cssAssets
+   * @param {Array<string>} cssAssets
    * @returns {Array<HtmlTagObject>}
    */
   generateStyleTags (cssAssets) {
     return cssAssets.map(styleAsset => ({
       tagName: 'link',
       voidTag: true,
-      entry: styleAsset.entryName,
       attributes: {
-        href: styleAsset.path,
+        href: styleAsset,
         rel: 'stylesheet'
       }
     }));
   }
 
+  /**
+   * 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 | {
-            [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" }
+            [name: string]:
+              false // disabled
+              | string // 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" }
         }} metaOptions
   * @returns {Array<HtmlTagObject>}
   */
@@ -693,9 +755,9 @@ class HtmlWebpackPlugin {
     if (metaOptions === false) {
       return [];
     }
-      // Make tags self-closing in case of xhtml
-      // Turn { "viewport" : "width=500, initial-scale=1" } into
-      // [{ name:"viewport" content:"width=500, initial-scale=1" }]
+    // Make tags self-closing in case of xhtml
+    // Turn { "viewport" : "width=500, initial-scale=1" } into
+    // [{ name:"viewport" content:"width=500, initial-scale=1" }]
     const metaTagAttributeObjects = Object.keys(metaOptions)
       .map((metaName) => {
         const metaTagContent = metaOptions[metaName];
@@ -771,6 +833,28 @@ class HtmlWebpackPlugin {
     return result;
   }
 
+  /**
+   * Add toString methods for easier rendering
+   * inside the template
+   *
+   * @param {Array<HtmlTagObject>} assetTagGroup
+   * @returns {Array<HtmlTagObject>}
+   */
+  prepareAssetTagGroupForRendering (assetTagGroup) {
+    const xhtml = this.options.xhtml;
+    const preparedTags = assetTagGroup.map((assetTag) => {
+      const copiedAssetTag = Object.assign({}, assetTag);
+      copiedAssetTag.toString = function () {
+        return htmlTagObjectToString(this, xhtml);
+      };
+      return copiedAssetTag;
+    });
+    preparedTags.toString = function () {
+      return this.join('');
+    };
+    return preparedTags;
+  }
+
   /**
    * Injects the assets into the given html string
    *
@@ -842,14 +926,30 @@ class HtmlWebpackPlugin {
     return url + (url.indexOf('?') === -1 ? '?' : '&') + hash;
   }
 
+  /**
+   * Encode each path component using `encodeURIComponent` as files can contain characters
+   * which needs special encoding in URLs like `+ `.
+   *
+   * @param {string} filePath
+   */
+  urlencodePath (filePath) {
+    return filePath.split('/').map(encodeURIComponent).join('/');
+  }
+
   /**
    * 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);
@@ -879,8 +979,8 @@ class HtmlWebpackPlugin {
  * @param {WebpackCompilation} compilation
  * @param {{
    publicPath: string,
-   js: Array<{entryName: string, path: string}>,
-   css: Array<{entryName: string, path: string}>,
+   js: Array<string>,
+   css: Array<string>,
    manifest?: string,
    favicon?: string
  }} assets
@@ -888,8 +988,8 @@ class HtmlWebpackPlugin {
      headTags: HtmlTagObject[],
      bodyTags: HtmlTagObject[]
    }} assetTags
- * @param {HtmlWebpackPluginOptions} options
- * @returns {HtmlWebpackPluginTemplateParameter}
+ * @param {ProcessedHtmlWebpackOptions} options
+ * @returns {TemplateParameter}
  */
 function templateParametersGenerator (compilation, assets, assetTags, options) {
   return {
@@ -912,7 +1012,7 @@ HtmlWebpackPlugin.version = 4;
 /**
  * A static helper to get the hooks for this plugin
  *
- * Usage: HtmlWebpackPlugin.getHook(compilation, 'HookName').tap('YourPluginName', () => { ... });
+ * Usage: HtmlWebpackPlugin.getHooks(compilation).HOOK_NAME.tapAsync('YourPluginName', () => { ... });
  */
 HtmlWebpackPlugin.getHooks = getHtmlWebpackPluginHooks;
 HtmlWebpackPlugin.createHtmlTagObject = createHtmlTagObject;