html-webpack-plugin 4.0.0-beta.13 → 4.0.0-beta.5

package/README.md

@@ -77,7 +77,6 @@ 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
@@ -86,8 +85,8 @@ The `html-webpack-plugin` provides [hooks](https://github.com/jantimon/html-webp
  * [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 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>
@@ -129,7 +128,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 [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin))
+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))
 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.
@@ -141,23 +140,21 @@ 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` 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 - 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)|
-|**`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'}`|
-|**`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)|
+|**[`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)|
 |**[`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
 
@@ -324,7 +321,7 @@ plugins: [
 ### Minification
 
 If the `minify` option is set to `true` (the default when webpack's `mode` is `'production'`),
-the generated HTML will be minified using [html-minifier-terser](https://github.com/DanielRuf/html-minifier-terser)
+the generated HTML will be minified using [html-minifier](https://github.com/kangax/html-minifier)
 and the following options:
 
 ```js
@@ -338,10 +335,10 @@ and the following options:
 }
 ```
 
-To use custom [html-minifier options](https://github.com/DanielRuf/html-minifier-terser#options-quick-reference)
+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 minification during production mode set the `minify` option to `false`.
+To disable minifcation during production mode set the `minify` option to `false`.
 
 ### Meta Tags
 
@@ -390,39 +387,6 @@ 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.
@@ -544,7 +508,7 @@ class MyPlugin {
     compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
       console.log('The compiler is starting a new compilation...')
 
-      // Static Plugin interface |compilation |HOOK NAME | register listener 
+      // Staic 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,9 +1,8 @@
 // @ts-check
 // Import types
-/** @typedef {import("./typings").HtmlTagObject} HtmlTagObject */
-/** @typedef {import("./typings").Options} HtmlWebpackOptions */
-/** @typedef {import("./typings").ProcessedOptions} ProcessedHtmlWebpackOptions */
-/** @typedef {import("./typings").TemplateParameter} TemplateParameter */
+/* eslint-disable */
+/// <reference path="./typings.d.ts" />
+/* eslint-enable */
 /** @typedef {import("webpack/lib/Compiler.js")} WebpackCompiler */
 /** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
 'use strict';
@@ -29,37 +28,35 @@ const fsReadFileAsync = promisify(fs.readFile);
 
 class HtmlWebpackPlugin {
   /**
-   * @param {HtmlWebpackOptions} [options]
+   * @param {Partial<HtmlWebpackPluginOptions>} [options]
    */
   constructor (options) {
-    /** @type {HtmlWebpackOptions} */
+    /** @type {Partial<HtmlWebpackPluginOptions>} */
     const userOptions = options || {};
 
     // Default options
-    /** @type {ProcessedHtmlWebpackOptions} */
+    /** @type {HtmlWebpackPluginOptions} */
     const defaultOptions = {
-      template: 'auto',
+      template: path.join(__dirname, 'default_index.ejs'),
       templateContent: false,
       templateParameters: templateParametersGenerator,
       filename: 'index.html',
       hash: false,
-      inject: userOptions.scriptLoading !== 'defer' ? 'body' : 'head',
-      scriptLoading: 'blocking',
+      inject: true,
       compile: true,
       favicon: false,
-      minify: 'auto',
+      minify: undefined,
       cache: true,
       showErrors: true,
       chunks: 'all',
       excludeChunks: [],
       chunksSortMode: 'auto',
       meta: {},
-      base: false,
       title: 'Webpack App',
       xhtml: false
     };
 
-    /** @type {ProcessedHtmlWebpackOptions} */
+    /** @type {HtmlWebpackPluginOptions} */
     this.options = Object.assign(defaultOptions, userOptions);
 
     // Default metaOptions if no template is provided
@@ -114,8 +111,7 @@ class HtmlWebpackPlugin {
     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 } */
+    if (minify === true || (minify === undefined && isProductionLikeMode)) {
       this.options.minify = {
         // https://github.com/kangax/html-minifier#options-quick-reference
         collapseWhitespace: true,
@@ -220,12 +216,11 @@ 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)
               ]
@@ -233,7 +228,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
@@ -268,17 +263,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);
           })
@@ -334,8 +329,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 {
@@ -372,30 +367,21 @@ class HtmlWebpackPlugin {
     if (templateParameters === false) {
       return Promise.resolve({});
     }
-    if (typeof templateParameters !== 'function' && typeof templateParameters !== 'object') {
-      throw new Error('templateParameters has to be either a function or an object');
+    if (typeof templateParameters === 'function') {
+      return Promise
+        .resolve()
+        .then(() => templateParameters(compilation, assets, assetTags, this.options));
     }
-    const templateParameterFunction = typeof templateParameters === 'function'
-      // A custom function can overwrite the entire template parameter preparation
-      ? templateParameters
-      // If the template parameters is an object merge it with the default values
-      : (compilation, assets, assetTags, options) => Object.assign({},
-        templateParametersGenerator(compilation, assets, assetTags, options),
-        templateParameters
-      );
-    const preparedAssetTags = {
-      headTags: this.prepareAssetTagGroupForRendering(assetTags.headTags),
-      bodyTags: this.prepareAssetTagGroupForRendering(assetTags.bodyTags)
-    };
-    return Promise
-      .resolve()
-      .then(() => templateParameterFunction(compilation, assets, preparedAssetTags, this.options));
+    if (typeof templateParameters === 'object') {
+      return Promise.resolve(templateParameters);
+    }
+    throw new Error('templateParameters has to be either a function or an object');
   }
 
   /**
    * 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>,
@@ -447,7 +433,9 @@ class HtmlWebpackPlugin {
     const htmlAfterInjection = this.options.inject
       ? this.injectAssetsIntoHtml(html, assets, assetTags)
       : html;
-    const htmlAfterMinification = this.minifyHtml(htmlAfterInjection);
+    const htmlAfterMinification = this.options.minify
+      ? require('html-minifier').minify(htmlAfterInjection, this.options.minify)
+      : htmlAfterInjection;
     return Promise.resolve(htmlAfterMinification);
   }
 
@@ -557,7 +545,7 @@ class HtmlWebpackPlugin {
      * if a path publicPath is set in the current webpack config use it otherwise
      * fallback to a realtive path
      */
-    const webpackPublicPath = compilation.mainTemplate.getPublicPath({ hash: compilationHash });
+    const webpackPublicPath = compilation.mainTemplate.getPublicPath({hash: compilationHash});
     const isPublicPathDefined = webpackPublicPath.trim() !== '';
     let publicPath = isPublicPathDefined
       // If a hard coded public path exists use it
@@ -582,7 +570,7 @@ class HtmlWebpackPlugin {
     const assets = {
       // The public path
       publicPath: publicPath,
-      // Will contain all js and mjs files
+      // Will contain all js files
       js: [],
       // Will contain all css files
       css: [],
@@ -597,9 +585,9 @@ class HtmlWebpackPlugin {
       assets.manifest = this.appendHash(assets.manifest, compilationHash);
     }
 
-    // Extract paths to .js, .mjs and .css files from the current compilation
+    // Extract paths to .js and .css files from the current compilation
     const entryPointPublicPathMap = {};
-    const extensionRegexp = /\.(css|js|mjs)(\?|$)/;
+    const extensionRegexp = /\.(css|js)(\?|$)/;
     for (let i = 0; i < entryNames.length; i++) {
       const entryName = entryNames[i];
       const entryPointFiles = compilation.entrypoints.get(entryName).getFiles();
@@ -608,7 +596,7 @@ class HtmlWebpackPlugin {
       // E.g. bundle.js -> /bundle.js?hash
       const entryPointPublicPaths = entryPointFiles
         .map(chunkFile => {
-          const entryPointPublicPath = publicPath + this.urlencodePath(chunkFile);
+          const entryPointPublicPath = publicPath + chunkFile;
           return this.options.hash
             ? this.appendHash(entryPointPublicPath, compilationHash)
             : entryPointPublicPath;
@@ -616,7 +604,7 @@ class HtmlWebpackPlugin {
 
       entryPointPublicPaths.forEach((entryPointPublicPath) => {
         const extMatch = extensionRegexp.exec(entryPointPublicPath);
-        // Skip if the public path is not a .css, .mjs or .js file
+        // Skip if the public path is not a .css or .js file
         if (!extMatch) {
           return;
         }
@@ -626,8 +614,8 @@ class HtmlWebpackPlugin {
           return;
         }
         entryPointPublicPathMap[entryPointPublicPath] = true;
-        // ext will contain .js or .css, because .mjs recognizes as .js
-        const ext = extMatch[1] === 'mjs' ? 'js' : extMatch[1];
+        // ext will contain .js or .css
+        const ext = extMatch[1];
         assets[ext].push(entryPointPublicPath);
       });
     }
@@ -640,7 +628,7 @@ class HtmlWebpackPlugin {
    *
    * @param {string|false} faviconFilePath
    * @param {WebpackCompilation} compilation
-   * @param {string} publicPath
+   * @parma {string} publicPath
    * @returns {Promise<string|undefined>}
    */
   getFaviconPublicPath (faviconFilePath, compilation, publicPath) {
@@ -702,7 +690,6 @@ class HtmlWebpackPlugin {
       tagName: 'script',
       voidTag: false,
       attributes: {
-        defer: this.options.scriptLoading !== 'blocking',
         src: scriptAsset
       }
     }));
@@ -724,28 +711,6 @@ 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 | {
@@ -838,28 +803,6 @@ 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
    *
@@ -931,30 +874,14 @@ 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 template e.g. './index.html'
+   * The path to the tempalate 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);
@@ -965,38 +892,6 @@ class HtmlWebpackPlugin {
       (match, prefix, filepath, postfix) => prefix + path.resolve(filepath) + postfix);
   }
 
-  /**
-   * Minify the given string using html-minifier-terser
-   *
-   * As this is a breaking change to html-webpack-plugin 3.x
-   * provide an extended error message to explain how to get back
-   * to the old behaviour
-   *
-   * @param {string} html
-   */
-  minifyHtml (html) {
-    if (typeof this.options.minify !== 'object') {
-      return html;
-    }
-    try {
-      return require('html-minifier-terser').minify(html, this.options.minify);
-    } catch (e) {
-      const isParseError = String(e.message).indexOf('Parse Error') === 0;
-      if (isParseError) {
-        e.message = 'html-webpack-plugin could not minify the generated output.\n' +
-            'In production mode the html minifcation is enabled by default.\n' +
-            'If you are not generating a valid html output please disable it manually.\n' +
-            'You can do so by adding the following setting to your HtmlWebpackPlugin config:\n|\n|' +
-            '    minify: false\n|\n' +
-            'See https://github.com/jantimon/html-webpack-plugin#options for details.\n\n' +
-            'For parser dedicated bugs please create an issue here:\n' +
-            'https://danielruf.github.io/html-minifier-terser/' +
-          '\n' + e.message;
-      }
-      throw e;
-    }
-  }
-
   /**
    * Helper to return a sorted unique array of all asset files out of the
    * asset object
@@ -1025,10 +920,17 @@ class HtmlWebpackPlugin {
      headTags: HtmlTagObject[],
      bodyTags: HtmlTagObject[]
    }} assetTags
- * @param {ProcessedHtmlWebpackOptions} options
- * @returns {TemplateParameter}
+ * @param {HtmlWebpackPluginOptions} options
+ * @returns {HtmlWebpackPluginTemplateParameter}
  */
 function templateParametersGenerator (compilation, assets, assetTags, options) {
+  const xhtml = options.xhtml;
+  assetTags.headTags.toString = function () {
+    return this.map((assetTagObject) => htmlTagObjectToString(assetTagObject, xhtml)).join('');
+  };
+  assetTags.bodyTags.toString = function () {
+    return this.map((assetTagObject) => htmlTagObjectToString(assetTagObject, xhtml)).join('');
+  };
   return {
     compilation: compilation,
     webpackConfig: compilation.options,

package/lib/compiler.js

@@ -179,7 +179,7 @@ class HtmlWebpackChildCompiler {
  */
 function extractHelperFilesFromCompilation (mainCompilation, childCompilation, filename, childEntryChunks) {
   const helperAssetNames = childEntryChunks.map((entryChunk, index) => {
-    return mainCompilation.mainTemplate.getAssetPath(filename, {
+    return mainCompilation.mainTemplate.hooks.assetPath.call(filename, {
       hash: childCompilation.hash,
       chunk: entryChunk,
       name: `HtmlWebpackPlugin_${index}`
@@ -261,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.getAssetPath(outputFilename, {
+    const outputName = mainCompilation.mainTemplate.hooks.assetPath.call(outputFilename, {
       hash: compiledTemplate.hash,
       chunk: compiledTemplate.entry
     });

package/lib/hooks.js

@@ -1,5 +1,7 @@
 // @ts-check
-/** @typedef {import("../typings").Hooks} HtmlWebpackPluginHooks */
+/* eslint-disable */
+/// <reference path="../typings.d.ts" />
+/* eslint-enable */
 'use strict';
 /**
  * This file provides access to all public htmlWebpackPlugin hooks
@@ -10,9 +12,10 @@
 
 const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
 
-// The following is the API definition for all available hooks
-// For the TypeScript definition, see the Hooks type in typings.d.ts
-/**
+// The following typedef holds the API definition for all available hooks
+// to allow easier access when using ts-check or typescript inside plugins
+/** @typedef {{
+
   beforeAssetTagGeneration:
     AsyncSeriesWaterfallHook<{
       assets: {
@@ -25,6 +28,7 @@ const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
       outputName: string,
       plugin: HtmlWebpackPlugin
     }>,
+
   alterAssetTags:
     AsyncSeriesWaterfallHook<{
       assetTags: {
@@ -35,6 +39,7 @@ const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
       outputName: string,
       plugin: HtmlWebpackPlugin
     }>,
+
   alterAssetTagGroups:
     AsyncSeriesWaterfallHook<{
       headTags: Array<HtmlTagObject | HtmlTagObject>,
@@ -42,6 +47,7 @@ const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
       outputName: string,
       plugin: HtmlWebpackPlugin
     }>,
+
   afterTemplateExecution:
     AsyncSeriesWaterfallHook<{
       html: string,
@@ -50,18 +56,22 @@ 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,5 +1,7 @@
 // @ts-check
-/** @typedef {import("../typings").HtmlTagObject} HtmlTagObject */
+/* eslint-disable */
+/// <reference path="../typings.d.ts" />
+/* eslint-enable */
 /**
  * @file
  * This file provides to helper to create html as a object repesentation as

package/lib/loader.js

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

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "html-webpack-plugin",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.5",
   "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",
@@ -28,35 +27,34 @@
     ]
   },
   "devDependencies": {
-    "@types/html-minifier": "3.5.3",
     "@types/loader-utils": "1.1.3",
-    "@types/node": "11.13.9",
+    "@types/node": "10.11.4",
     "@types/tapable": "1.0.4",
-    "appcache-webpack-plugin": "1.4.0",
-    "commitizen": "4.0.3",
-    "css-loader": "2.1.1",
+    "appcache-webpack-plugin": "^1.4.0",
+    "commitizen": "3.0.2",
+    "css-loader": "^1.0.0",
     "cz-conventional-changelog": "2.1.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",
+    "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",
     "pug": "2.0.3",
     "pug-loader": "2.4.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"
+    "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"
   },
   "dependencies": {
-    "html-minifier-terser": "^5.0.1",
-    "loader-utils": "^1.2.3",
-    "lodash": "^4.17.15",
+    "html-minifier": "^3.5.20",
+    "loader-utils": "^1.1.0",
+    "lodash": "^4.17.11",
     "pretty-error": "^2.1.1",
-    "tapable": "^1.1.3",
+    "tapable": "^1.1.0",
     "util.promisify": "1.0.0"
   },
   "peerDependencies": {

package/typings.d.ts

@@ -1,246 +1,139 @@
-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 {
+/**
+ * The plugin options
+ */
+interface HtmlWebpackPluginOptions {
     /**
-     * Emit the file only if it was changed.
-     * Default: `true`.
-     */
-    cache: boolean;
-    /**
-     * List all entries which should be injected
+     * The title to use for the generated HTML document
      */
-    chunks: "all" | string[];
+    title: string,
     /**
-     * Allows to control how chunks should be sorted before they are included to the html.
-     * Default: `'auto'`.
+     * The `webpack` require path to the template.
+     * @see https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md
      */
-    chunksSortMode:
-      | "auto"
-      | "manual"
-      | (((entryNameA: string, entryNameB: string) => number));
+    template: string,
     /**
-     * List all entries which should not be injeccted
+     * Allow to use a html string instead of reading from a file
      */
-    excludeChunks: string[];
+    templateContent:
+      false // Use the template option instead to load a file
+      | string
+      | Promise<string>,
     /**
-     * Path to the favicon icon
+     * Allows to overwrite the parameters used in the template
      */
-    favicon: false | string;
+    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}
     /**
      * 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
     /**
-     * Set up script loading
-     * blocking will result in <script src="..."></script>
-     * defer will result in <script defer src="..."></script>
-     *
-     * The default behaviour is blocking
-     */
-    scriptLoading:
-      | "blocking"
-      | "defer"
-    /**
-     * Inject meta tags
+     * Path to the favicon icon
      */
-    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" }
-        };
+    favicon: false | string,
     /**
-     * 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
+     * HTML Minification options
      * @https://github.com/kangax/html-minifier#options-quick-reference
      */
-    minify: 'auto' | boolean | MinifyOptions;
+    minify?: boolean | {},
+    cache: boolean,
     /**
      * Render errors into the HTML page
      */
-    showErrors: boolean;
+    showErrors: 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
-     */
-    templateContent:
-      | false // Use the template option instead to load a file
-      | string
-      | Promise<string>;
-    /**
-     * 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: {
-            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 };
+    excludeChunks: string[],
+    chunksSortMode: 'auto' | 'manual' | (((entryNameA: string, entryNameB: string) => number)),
     /**
-     * The title to use for the generated HTML document
+     * Inject meta tags
      */
-    title: 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" }
+      },
     /**
      * 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 {
   /**
-   * The values which are available during template execution
-   *
-   * Please keep in mind that the `templateParameter` options allows to change them
+   * Attributes of the html tag
+   * E.g. `{'disabled': true, 'value': 'demo'}`
    */
-  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;
-    }>;
-  }
-
+  attributes: {
+    [attributeName: string]: string|boolean
+  },
   /**
-   * A tag element according to the htmlWebpackPlugin object notation
+   * Wether this html must not contain innerHTML
+   * @see https://www.w3.org/TR/html5/syntax.html#void-elements
    */
-  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;
+  voidTag: boolean,
+  /**
+   * The tag name e.g. `'div'`
+   */
+  tagName: string,
+  /**
+   * Inner HTML The
+   */
+  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
   }
 }