html-webpack-plugin 3.0.7 → 4.0.0-alpha

package/index.js

@@ -1,24 +1,45 @@
+// @ts-check
 'use strict';
 
 // use Polyfill for util.promisify in node versions < v8
 const promisify = require('util.promisify');
 
+// Import types
+/* eslint-disable */
+/// <reference path="./typings.d.ts" />
+/* eslint-enable */
+/** @typedef {import("webpack/lib/Compiler.js")} WebpackCompiler */
+/** @typedef {import("webpack/lib/Compilation.js")} WebpackCompilation */
+
 const vm = require('vm');
 const fs = require('fs');
 const _ = require('lodash');
 const path = require('path');
+
+const htmlTagObjectToString = require('./lib/html-tags').htmlTagObjectToString;
+
 const childCompiler = require('./lib/compiler.js');
 const prettyError = require('./lib/errors.js');
 const chunkSorter = require('./lib/chunksorter.js');
+const getHtmlWebpackPluginHooks = require('./lib/hooks.js').getHtmlWebpackPluginHooks;
+const getHtmlWebpackPluginHook = require('./lib/hooks.js').getHtmlWebpackPluginHook;
 
 const fsStatAsync = promisify(fs.stat);
 const fsReadFileAsync = promisify(fs.readFile);
 
 class HtmlWebpackPlugin {
+  /**
+   * @param {Partial<HtmlWebpackPluginOptions>} options
+   */
   constructor (options) {
     // Default options
-    this.options = _.extend({
+    /**
+     * @type {HtmlWebpackPluginOptions}
+     */
+    this.options = Object.assign({
       template: path.join(__dirname, 'default_index.ejs'),
+      templateContent: false,
+      templateParameters: templateParametersGenerator,
       filename: 'index.html',
       hash: false,
       inject: true,
@@ -29,11 +50,27 @@ class HtmlWebpackPlugin {
       showErrors: true,
       chunks: 'all',
       excludeChunks: [],
+      chunksSortMode: 'auto',
+      meta: {},
       title: 'Webpack App',
       xhtml: false
     }, options);
+    // Instance variables to keep caching information
+    // for multiple builds
+    this.childCompilerHash = undefined;
+    this.childCompilationOutputName = undefined;
+    this.assetJson = undefined;
+    this.hash = undefined;
+    /**
+     * The major version number of this plugin
+     */
+    this.version = 4;
   }
 
+  /**
+   * apply is called by the webpack main compiler during the start phase
+   * @param {WebpackCompiler} compiler
+   */
   apply (compiler) {
     const self = this;
     let isCompilationCached = false;
@@ -48,22 +85,10 @@ class HtmlWebpackPlugin {
       this.options.filename = path.relative(compiler.options.output.path, filename);
     }
 
-    // setup hooks for webpack 4
-    if (compiler.hooks) {
-      compiler.hooks.compilation.tap('HtmlWebpackPluginHooks', compilation => {
-        const SyncWaterfallHook = require('tapable').SyncWaterfallHook;
-        const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
-        compilation.hooks.htmlWebpackPluginAlterChunks = new SyncWaterfallHook(['chunks', 'objectWithPluginRef']);
-        compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration = new AsyncSeriesWaterfallHook(['pluginArgs']);
-        compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing = new AsyncSeriesWaterfallHook(['pluginArgs']);
-        compilation.hooks.htmlWebpackPluginAlterAssetTags = new AsyncSeriesWaterfallHook(['pluginArgs']);
-        compilation.hooks.htmlWebpackPluginAfterHtmlProcessing = new AsyncSeriesWaterfallHook(['pluginArgs']);
-        compilation.hooks.htmlWebpackPluginAfterEmit = new AsyncSeriesWaterfallHook(['pluginArgs']);
-      });
-    }
+    // setup hooks for third party plugins
+    compiler.hooks.compilation.tap('HtmlWebpackPluginHooks', getHtmlWebpackPluginHooks);
 
-    // Backwards compatible version of: compiler.hooks.make.tapAsync()
-    (compiler.hooks ? compiler.hooks.make.tapAsync.bind(compiler.hooks.make, 'HtmlWebpackPlugin') : compiler.plugin.bind(compiler, 'make'))((compilation, callback) => {
+    compiler.hooks.make.tapAsync('HtmlWebpackPlugin', (compilation, callback) => {
       // Compile the template (queued)
       compilationPromise = childCompiler.compileTemplate(self.options.template, compiler.context, self.options.filename, compilation)
         .catch(err => {
@@ -83,144 +108,124 @@ class HtmlWebpackPlugin {
         });
     });
 
-    // Backwards compatible version of: compiler.plugin.emit.tapAsync()
-    (compiler.hooks ? compiler.hooks.emit.tapAsync.bind(compiler.hooks.emit, 'HtmlWebpackPlugin') : compiler.plugin.bind(compiler, 'emit'))((compilation, callback) => {
-      const applyPluginsAsyncWaterfall = self.applyPluginsAsyncWaterfall(compilation);
-      // Get chunks info as json
-      // Note: we're excluding stuff that we don't need to improve toJson serialization speed.
-      const chunkOnlyConfig = {
-        assets: false,
-        cached: false,
-        children: false,
-        chunks: true,
-        chunkModules: false,
-        chunkOrigins: false,
-        errorDetails: false,
-        hash: false,
-        modules: false,
-        reasons: false,
-        source: false,
-        timings: false,
-        version: false
-      };
-      const allChunks = compilation.getStats().toJson(chunkOnlyConfig).chunks;
-      // Filter chunks (options.chunks and options.excludeCHunks)
-      let chunks = self.filterChunks(allChunks, self.options.chunks, self.options.excludeChunks);
-      // Sort chunks
-      chunks = self.sortChunks(chunks, self.options.chunksSortMode, compilation.chunkGroups);
-      // Let plugins alter the chunks and the chunk sorting
-      if (compilation.hooks) {
-        chunks = compilation.hooks.htmlWebpackPluginAlterChunks.call(chunks, { plugin: self });
-      } else {
-        // Before Webpack 4
-        chunks = compilation.applyPluginsWaterfall('html-webpack-plugin-alter-chunks', chunks, { plugin: self });
-      }
-      // Get assets
-      const assets = self.htmlWebpackPluginAssets(compilation, chunks);
-      // If this is a hot update compilation, move on!
-      // This solves a problem where an `index.html` file is generated for hot-update js files
-      // It only happens in Webpack 2, where hot updates are emitted separately before the full bundle
-      if (self.isHotUpdateCompilation(assets)) {
-        return callback();
-      }
+    compiler.hooks.emit.tapAsync('HtmlWebpackPlugin',
+    /**
+     * Hook into the webpack emit phase
+     * @param {WebpackCompilation} compilation
+     * @param {() => void} callback
+    */
+      (compilation, callback) => {
+        // Get all entry point names for this html file
+        const entryNames = Array.from(compilation.entrypoints.keys());
+        const filteredEntryNames = self.filterChunks(entryNames, self.options.chunks, self.options.excludeChunks);
+        const sortedEntryNames = self.sortEntryChunks(filteredEntryNames, this.options.chunksSortMode, compilation);
+        // Turn the entry point names into file paths
+        const assets = self.htmlWebpackPluginAssets(compilation, sortedEntryNames);
+
+        // If this is a hot update compilation, move on!
+        // This solves a problem where an `index.html` file is generated for hot-update js files
+        // It only happens in Webpack 2, where hot updates are emitted separately before the full bundle
+        if (self.isHotUpdateCompilation(assets)) {
+          return callback();
+        }
 
-      // If the template and the assets did not change we don't have to emit the html
-      const assetJson = JSON.stringify(self.getAssetFiles(assets));
-      if (isCompilationCached && self.options.cache && assetJson === self.assetJson) {
-        return callback();
-      } else {
-        self.assetJson = assetJson;
-      }
+        // If the template and the assets did not change we don't have to emit the html
+        const assetJson = JSON.stringify(self.getAssetFiles(assets));
+        if (isCompilationCached && self.options.cache && assetJson === self.assetJson) {
+          return callback();
+        } else {
+          self.assetJson = assetJson;
+        }
 
-      Promise.resolve()
+        Promise.resolve()
         // Favicon
-        .then(() => {
-          if (self.options.favicon) {
-            return self.addFileToAssets(self.options.favicon, compilation)
-              .then(faviconBasename => {
-                let publicPath = compilation.mainTemplate.getPublicPath({hash: compilation.hash}) || '';
-                if (publicPath && publicPath.substr(-1) !== '/') {
-                  publicPath += '/';
-                }
-                assets.favicon = publicPath + faviconBasename;
-              });
-          }
-        })
+          .then(() => {
+            if (self.options.favicon) {
+              return self.addFileToAssets(self.options.favicon, compilation)
+                .then(faviconBasename => {
+                  let publicPath = compilation.mainTemplate.getPublicPath({hash: compilation.hash}) || '';
+                  if (publicPath && publicPath.substr(-1) !== '/') {
+                    publicPath += '/';
+                  }
+                  assets.favicon = publicPath + faviconBasename;
+                });
+            }
+          })
         // Wait for the compilation to finish
-        .then(() => compilationPromise)
-        .then(compiledTemplate => {
+          .then(() => compilationPromise)
+          .then(compiledTemplate => {
           // Allow to use a custom function / string instead
-          if (self.options.templateContent !== undefined) {
-            return self.options.templateContent;
-          }
-          // Once everything is compiled evaluate the html factory
-          // and replace it with its content
-          return self.evaluateCompilationResult(compilation, compiledTemplate);
-        })
+            if (self.options.templateContent !== false) {
+              return self.options.templateContent;
+            }
+            // Once everything is compiled evaluate the html factory
+            // and replace it with its content
+            return self.evaluateCompilationResult(compilation, compiledTemplate);
+          })
         // Allow plugins to make changes to the assets before invoking the template
         // This only makes sense to use if `inject` is `false`
-        .then(compilationResult => applyPluginsAsyncWaterfall('html-webpack-plugin-before-html-generation', false, {
-          assets: assets,
-          outputName: self.childCompilationOutputName,
-          plugin: self
-        })
-      .then(() => compilationResult))
+          .then(compilationResult => getHtmlWebpackPluginHook(compilation, 'htmlWebpackPluginBeforeHtmlGeneration').promise({
+            assets: assets,
+            outputName: self.childCompilationOutputName,
+            plugin: self
+          })
+            .then(() => compilationResult))
         // Execute the template
-        .then(compilationResult => typeof compilationResult !== 'function'
-        ? compilationResult
-        : self.executeTemplate(compilationResult, chunks, assets, compilation))
+          .then(compilationResult => typeof compilationResult !== 'function'
+            ? compilationResult
+            : self.executeTemplate(compilationResult, assets, compilation))
         // Allow plugins to change the html before assets are injected
-        .then(html => {
-          const pluginArgs = {html: html, assets: assets, plugin: self, outputName: self.childCompilationOutputName};
-          return applyPluginsAsyncWaterfall('html-webpack-plugin-before-html-processing', true, pluginArgs);
-        })
-        .then(result => {
-          const html = result.html;
-          const assets = result.assets;
-          // Prepare script and link tags
-          const assetTags = self.generateAssetTags(assets);
-          const pluginArgs = {head: assetTags.head, body: assetTags.body, plugin: self, chunks: chunks, outputName: self.childCompilationOutputName};
-          // Allow plugins to change the assetTag definitions
-          return applyPluginsAsyncWaterfall('html-webpack-plugin-alter-asset-tags', true, pluginArgs)
-            .then(result => self.postProcessHtml(html, assets, { body: result.body, head: result.head })
-            .then(html => _.extend(result, {html: html, assets: assets})));
-        })
+          .then(html => {
+            const pluginArgs = {html: html, assets: assets, plugin: self, outputName: self.childCompilationOutputName};
+            return getHtmlWebpackPluginHook(compilation, 'htmlWebpackPluginBeforeHtmlProcessing').promise(pluginArgs);
+          })
+          .then(result => {
+            const html = result.html;
+            const assets = result.assets;
+            // Prepare script and link tags
+            const assetTags = self.generateHtmlTagObjects(assets);
+            const pluginArgs = {head: assetTags.head, body: assetTags.body, plugin: self, outputName: self.childCompilationOutputName};
+            // Allow plugins to change the assetTag definitions
+            return getHtmlWebpackPluginHook(compilation, 'htmlWebpackPluginAlterAssetTags').promise(pluginArgs)
+              .then(result => self.postProcessHtml(html, assets, { body: result.body, head: result.head })
+                .then(html => _.extend(result, {html: html, assets: assets})));
+          })
         // Allow plugins to change the html after assets are injected
-        .then(result => {
-          const html = result.html;
-          const assets = result.assets;
-          const pluginArgs = {html: html, assets: assets, plugin: self, outputName: self.childCompilationOutputName};
-          return applyPluginsAsyncWaterfall('html-webpack-plugin-after-html-processing', true, pluginArgs)
-            .then(result => result.html);
-        })
-        .catch(err => {
+          .then(result => {
+            const html = result.html;
+            const assets = result.assets;
+            const pluginArgs = {html: html, assets: assets, plugin: self, outputName: self.childCompilationOutputName};
+            return getHtmlWebpackPluginHook(compilation, 'htmlWebpackPluginAfterHtmlProcessing').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 => {
+            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 => {
           // Replace the compilation result with the evaluated html code
-          compilation.assets[self.childCompilationOutputName] = {
-            source: () => html,
-            size: () => html.length
-          };
-        })
-        .then(() => applyPluginsAsyncWaterfall('html-webpack-plugin-after-emit', false, {
-          html: compilation.assets[self.childCompilationOutputName],
-          outputName: self.childCompilationOutputName,
-          plugin: self
-        }).catch(err => {
-          console.error(err);
-          return null;
-        }).then(() => null))
+            compilation.assets[self.childCompilationOutputName] = {
+              source: () => html,
+              size: () => html.length
+            };
+          })
+          .then(() => getHtmlWebpackPluginHook(compilation, 'htmlWebpackPluginAfterEmit').promise({
+            html: compilation.assets[self.childCompilationOutputName],
+            outputName: self.childCompilationOutputName,
+            plugin: self
+          }).catch(err => {
+            console.error(err);
+            return null;
+          }).then(() => null))
         // Let webpack continue with it
-        .then(() => {
-          callback();
-        });
-    });
+          .then(() => {
+            callback();
+          });
+      });
   }
 
   /**
@@ -253,34 +258,39 @@ class HtmlWebpackPlugin {
       : Promise.reject('The loader "' + this.options.template + '" didn\'t return html.');
   }
 
+  /**
+   * Generate the template parameters for the template function
+   * @param {WebpackCompilation} compilation
+   *
+   */
+  getTemplateParameters (compilation, assets) {
+    if (typeof this.options.templateParameters === 'function') {
+      return this.options.templateParameters(compilation, assets, this.options);
+    }
+    if (typeof this.options.templateParameters === 'object') {
+      return this.options.templateParameters;
+    }
+    return {};
+  }
+
   /**
    * Html post processing
    *
-   * Returns a promise
+   * @returns Promise<string>
    */
-  executeTemplate (templateFunction, chunks, assets, compilation) {
-    const self = this;
-    return Promise.resolve()
-      // Template processing
-      .then(() => {
-        const templateParams = {
-          compilation: compilation,
-          webpack: compilation.getStats().toJson(),
-          webpackConfig: compilation.options,
-          htmlWebpackPlugin: {
-            files: assets,
-            options: self.options
-          }
-        };
-        let html = '';
-        try {
-          html = templateFunction(templateParams);
-        } catch (e) {
-          compilation.errors.push(new Error('Template execution failed: ' + e));
-          return Promise.reject(e);
-        }
-        return html;
-      });
+  executeTemplate (templateFunction, assets, compilation) {
+    // Template processing
+    const templateParams = this.getTemplateParameters(compilation, assets);
+    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);
   }
 
   /**
@@ -289,24 +299,23 @@ class HtmlWebpackPlugin {
    * Returns a promise
    */
   postProcessHtml (html, assets, assetTags) {
-    const self = this;
     if (typeof html !== 'string') {
       return Promise.reject('Expected html to be a string but got ' + JSON.stringify(html));
     }
     return Promise.resolve()
       // Inject
       .then(() => {
-        if (self.options.inject) {
-          return self.injectAssetsIntoHtml(html, assets, assetTags);
+        if (this.options.inject) {
+          return this.injectAssetsIntoHtml(html, assets, assetTags);
         } else {
           return html;
         }
       })
       // Minify
       .then(html => {
-        if (self.options.minify) {
+        if (this.options.minify) {
           const minify = require('html-minifier').minify;
-          return minify(html, self.options.minify);
+          return minify(html, this.options.minify === true ? {} : this.options.minify);
         }
         return html;
       });
@@ -314,6 +323,8 @@ class HtmlWebpackPlugin {
 
   /*
    * Pushes the content of the given filename to the compilation assets
+   * @param {string} filename
+   * @param {WebpackCompilation} compilation
    */
   addFileToAssets (filename, compilation) {
     filename = path.resolve(compilation.compiler.context, filename);
@@ -321,73 +332,50 @@ class HtmlWebpackPlugin {
       fsStatAsync(filename),
       fsReadFileAsync(filename)
     ])
-    .then(([size, source]) => {
-      return {
-        size,
-        source
-      };
-    })
-    .catch(() => Promise.reject(new Error('HtmlWebpackPlugin: could not load file ' + filename)))
-    .then(results => {
-      const basename = path.basename(filename);
-      if (compilation.fileDependencies.add) {
+      .then(([size, source]) => {
+        return {
+          size,
+          source
+        };
+      })
+      .catch(() => Promise.reject(new Error('HtmlWebpackPlugin: could not load file ' + filename)))
+      .then(results => {
+        const basename = path.basename(filename);
         compilation.fileDependencies.add(filename);
-      } else {
-        // Before Webpack 4 - fileDepenencies was an array
-        compilation.fileDependencies.push(filename);
-      }
-      compilation.assets[basename] = {
-        source: () => results.source,
-        size: () => results.size.size
-      };
-      return basename;
-    });
+        compilation.assets[basename] = {
+          source: () => results.source,
+          size: () => results.size.size
+        };
+        return basename;
+      });
   }
 
   /**
    * Helper to sort chunks
+   * @param {string[]} entryNames
+   * @param {string|((entryNameA: string, entryNameB: string) => number)} sortMode
+   * @param {WebpackCompilation} compilation
    */
-  sortChunks (chunks, sortMode, chunkGroups) {
-    // Sort mode auto by default:
-    if (typeof sortMode === 'undefined') {
-      sortMode = 'auto';
-    }
+  sortEntryChunks (entryNames, sortMode, compilation) {
     // Custom function
     if (typeof sortMode === 'function') {
-      return chunks.sort(sortMode);
-    }
-    // Disabled sorting:
-    if (sortMode === 'none') {
-      return chunkSorter.none(chunks);
-    }
-    if (sortMode === 'manual') {
-      return chunkSorter.manual(chunks, this.options.chunks);
+      return entryNames.sort(sortMode);
     }
     // Check if the given sort mode is a valid chunkSorter sort mode
     if (typeof chunkSorter[sortMode] !== 'undefined') {
-      return chunkSorter[sortMode](chunks, chunkGroups);
+      return chunkSorter[sortMode](entryNames, compilation, this.options);
     }
     throw new Error('"' + sortMode + '" is not a valid chunk sort mode');
   }
 
   /**
    * Return all chunks from the compilation result which match the exclude and include filters
+   * @param {any} chunks
+   * @param {string[]|'all'} includedChunks
+   * @param {string[]} excludedChunks
    */
   filterChunks (chunks, includedChunks, excludedChunks) {
-    return chunks.filter(chunk => {
-      const chunkName = chunk.names[0];
-      // This chunk doesn't have a name. This script can't handled it.
-      if (chunkName === undefined) {
-        return false;
-      }
-      // Skip if the chunk should be lazy loaded
-      if (typeof chunk.isInitial === 'function') {
-        if (!chunk.isInitial()) {
-          return false;
-        }
-      } else if (!chunk.initial) {
-        return false;
-      }
+    return chunks.filter(chunkName => {
       // Skip if the chunks should be filtered and the given chunk was not added explicity
       if (Array.isArray(includedChunks) && includedChunks.indexOf(chunkName) === -1) {
         return false;
@@ -405,113 +393,170 @@ class HtmlWebpackPlugin {
     return assets.js.length && assets.js.every(name => /\.hot-update\.js$/.test(name));
   }
 
-  htmlWebpackPluginAssets (compilation, chunks) {
-    const self = this;
+  /**
+   * The htmlWebpackPluginAssets extracts the asset information of a webpack compilation
+   * for all given entry names
+   * @param {WebpackCompilation} compilation
+   * @param {string[]} entryNames
+   * @returns {{
+      publicPath: string,
+      js: Array<{entryName: string, path: string}>,
+      css: Array<{entryName: string, path: string}>,
+      manifest?: string,
+      favicon?: string
+    }}
+   */
+  htmlWebpackPluginAssets (compilation, entryNames) {
     const compilationHash = compilation.hash;
 
-    // Use the configured public path or build a relative path
+    /**
+     * @type {string} the configured public path to the asset root
+     * if a publicPath is set in the current webpack config use it otherwise
+     * fallback to a realtive path
+     */
     let publicPath = typeof compilation.options.output.publicPath !== 'undefined'
       // If a hard coded public path exists use it
       ? compilation.mainTemplate.getPublicPath({hash: compilationHash})
       // If no public path was set get a relative url path
-      : path.relative(path.resolve(compilation.options.output.path, path.dirname(self.childCompilationOutputName)), compilation.options.output.path)
+      : path.relative(path.resolve(compilation.options.output.path, path.dirname(this.childCompilationOutputName)), compilation.options.output.path)
         .split(path.sep).join('/');
 
     if (publicPath.length && publicPath.substr(-1, 1) !== '/') {
       publicPath += '/';
     }
 
+    /**
+     * @type {{
+        publicPath: string,
+        js: Array<{entryName: string, path: string}>,
+        css: Array<{entryName: string, path: string}>,
+        manifest?: string,
+        favicon?: string
+      }}
+     */
     const assets = {
       // The public path
       publicPath: publicPath,
-      // Will contain all js & css files by chunk
-      chunks: {},
       // Will contain all js files
       js: [],
       // Will contain all css files
       css: [],
       // Will contain the html5 appcache manifest files if it exists
-      manifest: Object.keys(compilation.assets).filter(assetFile => path.extname(assetFile) === '.appcache')[0]
+      manifest: Object.keys(compilation.assets).find(assetFile => path.extname(assetFile) === '.appcache'),
+      // Favicon
+      favicon: undefined
     };
 
     // Append a hash for cache busting
-    if (this.options.hash) {
-      assets.manifest = self.appendHash(assets.manifest, compilationHash);
-      assets.favicon = self.appendHash(assets.favicon, compilationHash);
+    if (this.options.hash && assets.manifest) {
+      assets.manifest = this.appendHash(assets.manifest, compilationHash);
     }
 
-    for (let i = 0; i < chunks.length; i++) {
-      const chunk = chunks[i];
-      const chunkName = chunk.names[0];
-
-      assets.chunks[chunkName] = {};
-
-      // Prepend the public path to all chunk files
-      let chunkFiles = [].concat(chunk.files).map(chunkFile => publicPath + chunkFile);
-
-      // Append a hash for cache busting
-      if (this.options.hash) {
-        chunkFiles = chunkFiles.map(chunkFile => self.appendHash(chunkFile, compilationHash));
-      }
-
-      // Webpack outputs an array for each chunk when using sourcemaps
-      // or when one chunk hosts js and css simultaneously
-      const js = chunkFiles.find(chunkFile => /.js($|\?)/.test(chunkFile));
-      if (js) {
-        assets.chunks[chunkName].size = chunk.size;
-        assets.chunks[chunkName].entry = js;
-        assets.chunks[chunkName].hash = chunk.hash;
-        assets.js.push(js);
-      }
+    // Extract paths to .js and .css files from the current compilation
+    const extensionRegexp = /\.(css|js)(\?|$)/;
+    for (let i = 0; i < entryNames.length; i++) {
+      const entryName = entryNames[i];
+      const entryPointFiles = compilation.entrypoints.get(entryName).getFiles();
+      // Prepend the publicPath and append the hash depending on the
+      // webpack.output.publicPath and hashOptions
+      // E.g. bundle.js -> /bundle.js?hash
+      const entryPointPublicPaths = entryPointFiles
+        .map(chunkFile => {
+          const entryPointPublicPath = publicPath + chunkFile;
+          return this.options.hash
+            ? this.appendHash(entryPointPublicPath, compilationHash)
+            : entryPointPublicPath;
+        });
 
-      // Gather all css files
-      const css = chunkFiles.filter(chunkFile => /.css($|\?)/.test(chunkFile));
-      assets.chunks[chunkName].css = css;
-      assets.css = assets.css.concat(css);
+      entryPointPublicPaths.forEach((entryPointPublicPaths) => {
+        const extMatch = extensionRegexp.exec(entryPointPublicPaths);
+        // Skip if the public path is not a .css or .js file
+        if (!extMatch) {
+          return;
+        }
+        // ext will contain .js or .css
+        const ext = extMatch[1];
+        assets[ext].push({
+          entryName: entryName,
+          path: entryPointPublicPaths
+        });
+      });
     }
-
-    // Duplicate css assets can occur on occasion if more than one chunk
-    // requires the same css.
-    assets.css = _.uniq(assets.css);
-
     return assets;
   }
 
   /**
-   * Injects the assets into the given html string
+   * Generate meta tags
+   * @returns {HtmlTagObject[]}
    */
-  generateAssetTags (assets) {
+  getMetaTags () {
+    const metaOptions = this.options.meta;
+    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" }]
+    const metaTagAttributeObjects = Object.keys(metaOptions).map((metaName) => {
+      const metaTagContent = metaOptions[metaName];
+      return (typeof metaTagContent === 'string') ? {
+        name: metaName,
+        content: metaTagContent
+      } : metaTagContent;
+    });
+    // Turn [{ name:"viewport" content:"width=500, initial-scale=1" }] into
+    // the html-webpack-plugin tag structure
+    return metaTagAttributeObjects.map((metaTagAttributes) => {
+      return {
+        tagName: 'meta',
+        voidTag: true,
+        attributes: metaTagAttributes
+      };
+    });
+  }
+
+  /**
+   * Turns the given asset information into tag object representations
+   * which is seperated into head and body
+   *
+   * @param {{
+      js: {entryName: string, path: string}[],
+      css: {entryName: string, path: string}[],
+      favicon?: string
+    }} assets
+   *
+   * @returns {{
+       head: HtmlTagObject[],
+       body: HtmlTagObject[]
+     }}
+   */
+  generateHtmlTagObjects (assets) {
     // Turn script files into script tags
-    const scripts = assets.js.map(scriptPath => ({
+    const scripts = assets.js.map(scriptAsset => ({
       tagName: 'script',
-      closeTag: true,
-
+      voidTag: false,
       attributes: {
-        type: 'text/javascript',
-        src: scriptPath
+        src: scriptAsset.path
       }
     }));
-    // Make tags self-closing in case of xhtml
-    const selfClosingTag = !!this.options.xhtml;
     // Turn css files into link tags
-    const styles = assets.css.map(stylePath => ({
+    const styles = assets.css.map(styleAsset => ({
       tagName: 'link',
-      selfClosingTag: selfClosingTag,
-
+      voidTag: true,
       attributes: {
-        href: stylePath,
+        href: styleAsset.path,
         rel: 'stylesheet'
       }
     }));
     // Injection targets
-    let head = [];
+    let head = this.getMetaTags();
     let body = [];
 
     // If there is a favicon present, add it to the head
     if (assets.favicon) {
       head.push({
         tagName: 'link',
-        selfClosingTag: selfClosingTag,
+        voidTag: true,
         attributes: {
           rel: 'shortcut icon',
           href: assets.favicon
@@ -531,13 +576,24 @@ class HtmlWebpackPlugin {
 
   /**
    * Injects the assets into the given html string
+   *
+   * @param {string} html
+   * @param {any} assets
+   * The input html
+   * @param {{
+       head: HtmlTagObject[],
+       body: HtmlTagObject[]
+     }} assetTags
+   * The asset tags to inject
+   *
+   * @returns {string}
    */
   injectAssetsIntoHtml (html, assets, assetTags) {
     const htmlRegExp = /(<html[^>]*>)/i;
     const headRegExp = /(<\/head\s*>)/i;
     const bodyRegExp = /(<\/body\s*>)/i;
-    const body = assetTags.body.map(this.createHtmlTag);
-    const head = assetTags.head.map(this.createHtmlTag);
+    const body = assetTags.body.map((assetTagObject) => htmlTagObjectToString(assetTagObject, this.options.xhtml));
+    const head = assetTags.head.map((assetTagObject) => htmlTagObjectToString(assetTagObject, this.options.xhtml));
 
     if (body.length) {
       if (bodyRegExp.test(html)) {
@@ -577,7 +633,10 @@ class HtmlWebpackPlugin {
   }
 
   /**
-   * Appends a cache busting hash
+   * Appends a cache busting hash to the query string of the url
+   * E.g. http://localhost:8080/ -> http://localhost:8080/?50c9096ba6183fd728eeb065a26ec175
+   * @param {string} url
+   * @param {string} hash
    */
   appendHash (url, hash) {
     if (!url) {
@@ -586,28 +645,12 @@ class HtmlWebpackPlugin {
     return url + (url.indexOf('?') === -1 ? '?' : '&') + hash;
   }
 
-  /**
-   * Turn a tag definition into a html string
-   */
-  createHtmlTag (tagDefinition) {
-    const attributes = Object.keys(tagDefinition.attributes || {})
-      .filter(attributeName => tagDefinition.attributes[attributeName] !== false)
-      .map(attributeName => {
-        if (tagDefinition.attributes[attributeName] === true) {
-          return attributeName;
-        }
-        return attributeName + '="' + tagDefinition.attributes[attributeName] + '"';
-      });
-    // Backport of 3.x void tag definition
-    const voidTag = tagDefinition.voidTag !== undefined ? tagDefinition.voidTag : !tagDefinition.closeTag;
-    const selfClosingTag = tagDefinition.voidTag !== undefined ? tagDefinition.voidTag && this.options.xhtml : tagDefinition.selfClosingTag;
-    return '<' + [tagDefinition.tagName].concat(attributes).join(' ') + (selfClosingTag ? '/' : '') + '>' +
-      (tagDefinition.innerHTML || '') +
-      (voidTag ? '' : '</' + tagDefinition.tagName + '>');
-  }
-
   /**
    * Helper to return the absolute template path with a fallback loader
+   * @param {string} template
+   * 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 the template doesn't use a loader use the lodash template loader
@@ -629,59 +672,20 @@ class HtmlWebpackPlugin {
     files.sort();
     return files;
   }
-
-  /**
-   * Helper to promisify compilation.applyPluginsAsyncWaterfall that returns
-   * a function that helps to merge given plugin arguments with processed ones
-   */
-  applyPluginsAsyncWaterfall (compilation) {
-    if (compilation.hooks) {
-      return (eventName, requiresResult, pluginArgs) => {
-        const ccEventName = trainCaseToCamelCase(eventName);
-        if (!compilation.hooks[ccEventName]) {
-          compilation.errors.push(
-            new Error('No hook found for ' + eventName)
-          );
-        }
-
-        return compilation.hooks[ccEventName].promise(pluginArgs);
-      };
-    }
-
-    // Before Webpack 4
-    const promisedApplyPluginsAsyncWaterfall = function (name, init) {
-      return new Promise((resolve, reject) => {
-        const callback = function (err, result) {
-          if (err) {
-            return reject(err);
-          }
-          resolve(result);
-        };
-        compilation.applyPluginsAsyncWaterfall(name, init, callback);
-      });
-    };
-
-    return (eventName, requiresResult, pluginArgs) => promisedApplyPluginsAsyncWaterfall(eventName, pluginArgs)
-      .then(result => {
-        if (requiresResult && !result) {
-          compilation.warnings.push(
-            new Error('Using ' + eventName + ' without returning a result is deprecated.')
-          );
-        }
-        return _.extend(pluginArgs, result);
-      });
-  }
 }
 
 /**
- * Takes a string in train case and transforms it to camel case
- *
- * Example: 'hello-my-world' to 'helloMyWorld'
- *
- * @param {string} word
+ * The default for options.templateParameter
+ * Generate the template parameters
  */
-function trainCaseToCamelCase (word) {
-  return word.replace(/-([\w])/g, (match, p1) => p1.toUpperCase());
+function templateParametersGenerator (compilation, assets, options) {
+  return {
+    compilation: compilation,
+    webpackConfig: compilation.options,
+    htmlWebpackPlugin: {
+      files: assets,
+      options: options
+    }
+  };
 }
-
 module.exports = HtmlWebpackPlugin;