jantimon · Dec 13, 2018 · Jan 11, 2019 · Feb 3, 2019 · Feb 3, 2019 · Feb 16, 2019
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: html-webpack-plugin
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,70 +1,43 @@
 ---
 name: Bug report
-about: Create a report to help us improve
+about: Create a 🕷 report to help us improve
 
 ---
 
-## Expected behaviour
+<!-- If you deleting this template this issue is very likely to be closed -->
 
-Tell us what you would expect the html-webpack-plugin should.
+## Current behaviour 💣
 
-## Current behaviour
+<!-- Tell us which problem you are facing which might be caused by a bug in the html-webpack-plugin -->
 
-Tell us what the html-webpack-plugin does instead.
+## Expected behaviour ☀️
 
-## Environment
+<!-- If not included in current behaviour please explain what should happen instead -->
 
-Tell us which operating system you are using, as well as which versions of Node.js, npm, webpack, and html-webpack-plugin. Run the following to get it quickly:
+### Reproduction Example 👾
 
-```
-node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"
-npm --version
-npm ls webpack
-npm ls html-webpack-plugin
-```
+<!--
 
-### Config
+Please provide a minimal example how to reproduce your problem..
+Delete all plugins which are unrelated   
+Delete all loaders which are unrelated  
+Delete the production webpack config if your bug happens on develop
+Delete the develop webpack config if your bug happens only on production
 
-Copy the minimal `webpack.config.js` to produce this issue:
+Feel free to use this codebox template as a starting point: https://codesandbox.io/s/html-webpack-plugin-5x-alpha-d37s2?file=/webpack.config.js
+-->
 
+## Environment 🖥
 
-```js
-module.exports = {
-  entry: 'app.js',
-  output: {
-    path: 'dist',
-    filename: 'index_bundle.js'
-  },
-  module: {
-    rules: [
-      ...
-    ]
-  }
-  plugins: [
-    new HtmlWebpackPlugin(),
-    ...
-  ]
-}
-```
-
-Copy your template file if it is part of this issue:
+<!--
+To help you we need to know which versions you using otherwise it is impossible to help you.  
+Please run the following commands to see your current versions:
 
-```html
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>My App</title>
-    </head>
-    <body>
-    </body>
-</html>
 ```
+node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"
+npm --version
+npm ls webpack
+npm ls html-webpack-plugin
+```
+-->
 
-## Relevant Links
-
-- If your project is public, link to the repo so we can investigate directly.
-- **BONUS POINTS:** Create a [minimal reproduction](http://stackoverflow.com/help/mcve) and upload it to GitHub. This will get you the fastest support.
-
-## Additional context
-
-Add any other context about the problem here.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,37 @@
+name: CI
+  push:
+      branches: [main]
+  pull_request:
+      branches: [main]
+jobs:
+  build:
+    name: test Node ${{ matrix.node }} Webpack ${{ matrix.webpack }} ${{ matrix.os }}
+    timeout-minutes: 15
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ['10.x', '12.x', '14.x']
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+        webpack: ['5']
+
+    steps:
+      - name: LF
+        run: git config --global core.autocrlf false
+
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install Dependencies
+        run: npm install --ignore-scripts --force --legacy-peer-deps
+
+      - name: Install Webpack ${{ matrix.webpack }}
+        run: npm install --ignore-scripts --force --legacy-peer-deps webpack@${{ matrix.webpack }}
+
+      - name: Test
+        run: npm test -- --forceExit || npm test -- --forceExit || npm test -- --forceExit
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@
 npm-debug.*.log
 yarn.lock
 package-lock.json
+npm-debug.log.*
diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-6.11.5
+10.13.0
diff --git a/.travis.yml b/.travis.yml
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
diff --git a/appveyor.yml b/appveyor.yml
diff --git a/docs/template-option.md b/docs/template-option.md
@@ -2,7 +2,7 @@
 
 ## History
 
-The version 2.x which was introduced last year (Sep, 2015) changed the way the template is processed.
+The version 2.x which was introduced 2015 changed the way the template is processed.
 Instead of forcing all users to use the [blueimp](https://github.com/blueimp/JavaScript-Templates) template engine it allowed to use any webpack loader:
 
 * [pug](https://github.com/pugjs/pug-loader)
@@ -19,7 +19,8 @@ There are three ways to set the loader:
 
 ## 1) Don't set any loader
 
-By default (if you don't specify any loader in any way) a [fallback lodash loader](https://github.com/ampedandwired/html-webpack-plugin/blob/master/lib/loader.js) kicks in.
+By default (if you don't specify any loader in any way) a [fallback ejs loader](https://github.com/jantimon/html-webpack-plugin/blob/master/lib/loader.js) kicks in.
+Please note that this loader does not support the full ejs syntax as it is based on [lodash template](https://lodash.com/docs/#template).
 
 ```js
 {
@@ -31,23 +32,23 @@ By default (if you don't specify any loader in any way) a [fallback lodash loade
 }
 ```
 
-Be aware, using `.html` as your template extention may unexpectedly trigger another loader.
+Be aware, using `.html` as your template extension may unexpectedly trigger another loader.
 
 ## 2) Setting a loader directly for the template
 
 ```js
 new HtmlWebpackPlugin({
-  // For details on `!!` see https://webpack.github.io/docs/loaders.html#loader-order
-  template: '!!handlebars!src/index.hbs'
+  // For details on `!!` see https://webpack.js.org/concepts/loaders/#inline
+  template: '!!handlebars-loader!src/index.hbs'
 })
 ```
 
-## 3) Setting a loader using the `module.loaders` syntax
+## 3) Setting a loader using the `module.rules` syntax
 
 ```js
 {
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.hbs$/,
         loader: 'handlebars-loader'
@@ -63,12 +64,12 @@ new HtmlWebpackPlugin({
 ```
 
 However this also means that in the following example webpack will use the [html loader for your template](https://webpack.js.org/loaders/html-loader/).
-This will **cause html minification** and it will also **disable the ejs fallback** loader.
+This will **cause html minification** and it will also **disable the ejs/lodash fallback** loader.
 
 ```js
 {
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.html$/,
         loader: 'html-loader'

diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,19 @@
+# Examples
+
+A collection of repositories or pages using html-webpack-plugin.
+
+Example | Link
+--- | ---
+Appcache | [appcache](./appcache)
+Chunk Optimization | [chunk-optimization](./chunk-optimization)
+Custom Template | [custom-template](./custom-template)
+Custom Script / Link tag position | [custom-insertion-point](./custom-insertion-position)
+Default | [default](./default)
+Favicon | [favicon](./favicon.)
+Html Loader | [html-loader](./html-loader)
+Inline | [inline](./inline)
+Javascript-advanced | [javascript-advanced](./javascript-advanced)
+Javascript | [javascript](./javascript)
+Pug Loader | [pug-loader](./pug-loader)
+Sort Manually | [sort-manually](./sort-manually)
+Template Parameters | [template-parameters](./template-parameters)
diff --git a/examples/appcache/dist/webpack-4/bundle.js b/examples/appcache/dist/webpack-4/bundle.js
diff --git a/examples/appcache/dist/webpack-4/index.html b/examples/appcache/dist/webpack-4/index.html
diff --git a/examples/appcache/dist/webpack-4/manifest.appcache b/examples/appcache/dist/webpack-4/manifest.appcache
diff --git a/examples/appcache/webpack.config.js b/examples/appcache/webpack.config.js
diff --git a/examples/build-examples.js b/examples/build-examples.js
@@ -20,7 +20,7 @@ examples.forEach(function (exampleName) {
   var configFile = path.join(examplePath, 'webpack.config.js');
 
   var config = require(configFile);
-  if (webpackMajorVersion === '4') {
+  if (Number(webpackMajorVersion) >= 4) {
     config.plugins.unshift(new webpack.LoaderOptionsPlugin({
       options: {
         context: process.cwd() // or the same value as `context`

diff --git a/examples/chunk-optimization/dist/webpack-4/entryA.html b/examples/chunk-optimization/dist/webpack-4/entryA.html
diff --git a/examples/chunk-optimization/dist/webpack-4/entryA.js b/examples/chunk-optimization/dist/webpack-4/entryA.js
diff --git a/examples/chunk-optimization/dist/webpack-4/entryA~entryB.js b/examples/chunk-optimization/dist/webpack-4/entryA~entryB.js
diff --git a/examples/chunk-optimization/dist/webpack-4/entryB.html b/examples/chunk-optimization/dist/webpack-4/entryB.html
diff --git a/examples/chunk-optimization/dist/webpack-4/entryB.js b/examples/chunk-optimization/dist/webpack-4/entryB.js
diff --git a/examples/chunk-optimization/dist/webpack-4/entryC.html b/examples/chunk-optimization/dist/webpack-4/entryC.html
diff --git a/examples/chunk-optimization/dist/webpack-4/libText.js b/examples/chunk-optimization/dist/webpack-4/libText.js
diff --git a/examples/chunk-optimization/dist/webpack-4/vendors~entryA~entryB.js b/examples/chunk-optimization/dist/webpack-4/vendors~entryA~entryB.js
diff --git a/examples/chunk-optimization/dist/webpack-5/219.js b/examples/chunk-optimization/dist/webpack-5/219.js
@@ -0,0 +1,352 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[219],{
+
+/***/ 609:
+/***/ ((module) => {
+
+"use strict";
+
+
+/*
+  MIT License http://www.opensource.org/licenses/mit-license.php
+  Author Tobias Koppers @sokra
+*/
+// css base code, injected by the css-loader
+// eslint-disable-next-line func-names
+module.exports = function (cssWithMappingToString) {
+  var list = []; // return the list of modules as css string
+
+  list.toString = function toString() {
+    return this.map(function (item) {
+      var content = cssWithMappingToString(item);
+
+      if (item[2]) {
+        return "@media ".concat(item[2], " {").concat(content, "}");
+      }
+
+      return content;
+    }).join('');
+  }; // import a list of modules into the list
+  // eslint-disable-next-line func-names
+
+
+  list.i = function (modules, mediaQuery, dedupe) {
+    if (typeof modules === 'string') {
+      // eslint-disable-next-line no-param-reassign
+      modules = [[null, modules, '']];
+    }
+
+    var alreadyImportedModules = {};
+
+    if (dedupe) {
+      for (var i = 0; i < this.length; i++) {
+        // eslint-disable-next-line prefer-destructuring
+        var id = this[i][0];
+
+        if (id != null) {
+          alreadyImportedModules[id] = true;
+        }
+      }
+    }
+
+    for (var _i = 0; _i < modules.length; _i++) {
+      var item = [].concat(modules[_i]);
+
+      if (dedupe && alreadyImportedModules[item[0]]) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
+      if (mediaQuery) {
+        if (!item[2]) {
+          item[2] = mediaQuery;
+        } else {
+          item[2] = "".concat(mediaQuery, " and ").concat(item[2]);
+        }
+      }
+
+      list.push(item);
+    }
+  };
+
+  return list;
+};
+
+/***/ }),
+
+/***/ 62:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+var isOldIE = function isOldIE() {
+  var memo;
+  return function memorize() {
+    if (typeof memo === 'undefined') {
+      // Test for IE <= 9 as proposed by Browserhacks
+      // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
+      // Tests for existence of standard globals is to allow style-loader
+      // to operate correctly into non-standard environments
+      // @see https://github.com/webpack-contrib/style-loader/issues/177
+      memo = Boolean(window && document && document.all && !window.atob);
+    }
+
+    return memo;
+  };
+}();
+
+var getTarget = function getTarget() {
+  var memo = {};
+  return function memorize(target) {
+    if (typeof memo[target] === 'undefined') {
+      var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself
+
+      if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
+        try {
+          // This will throw an exception if access to iframe is blocked
+          // due to cross-origin restrictions
+          styleTarget = styleTarget.contentDocument.head;
+        } catch (e) {
+          // istanbul ignore next
+          styleTarget = null;
+        }
+      }
+
+      memo[target] = styleTarget;
+    }
+
+    return memo[target];
+  };
+}();
+
+var stylesInDom = [];
+
+function getIndexByIdentifier(identifier) {
+  var result = -1;
+
+  for (var i = 0; i < stylesInDom.length; i++) {
+    if (stylesInDom[i].identifier === identifier) {
+      result = i;
+      break;
+    }
+  }
+
+  return result;
+}
+
+function modulesToDom(list, options) {
+  var idCountMap = {};
+  var identifiers = [];
+
+  for (var i = 0; i < list.length; i++) {
+    var item = list[i];
+    var id = options.base ? item[0] + options.base : item[0];
+    var count = idCountMap[id] || 0;
+    var identifier = "".concat(id, " ").concat(count);
+    idCountMap[id] = count + 1;
+    var index = getIndexByIdentifier(identifier);
+    var obj = {
+      css: item[1],
+      media: item[2],
+      sourceMap: item[3]
+    };
+
+    if (index !== -1) {
+      stylesInDom[index].references++;
+      stylesInDom[index].updater(obj);
+    } else {
+      stylesInDom.push({
+        identifier: identifier,
+        updater: addStyle(obj, options),
+        references: 1
+      });
+    }
+
+    identifiers.push(identifier);
+  }
+
+  return identifiers;
+}
+
+function insertStyleElement(options) {
+  var style = document.createElement('style');
+  var attributes = options.attributes || {};
+
+  if (typeof attributes.nonce === 'undefined') {
+    var nonce =  true ? __webpack_require__.nc : 0;
+
+    if (nonce) {
+      attributes.nonce = nonce;
+    }
+  }
+
+  Object.keys(attributes).forEach(function (key) {
+    style.setAttribute(key, attributes[key]);
+  });
+
+  if (typeof options.insert === 'function') {
+    options.insert(style);
+  } else {
+    var target = getTarget(options.insert || 'head');
+
+    if (!target) {
+      throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
+    }
+
+    target.appendChild(style);
+  }
+
+  return style;
+}
+
+function removeStyleElement(style) {
+  // istanbul ignore if
+  if (style.parentNode === null) {
+    return false;
+  }
+
+  style.parentNode.removeChild(style);
+}
+/* istanbul ignore next  */
+
+
+var replaceText = function replaceText() {
+  var textStore = [];
+  return function replace(index, replacement) {
+    textStore[index] = replacement;
+    return textStore.filter(Boolean).join('\n');
+  };
+}();
+
+function applyToSingletonTag(style, index, remove, obj) {
+  var css = remove ? '' : obj.media ? "@media ".concat(obj.media, " {").concat(obj.css, "}") : obj.css; // For old IE
+
+  /* istanbul ignore if  */
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = replaceText(index, css);
+  } else {
+    var cssNode = document.createTextNode(css);
+    var childNodes = style.childNodes;
+
+    if (childNodes[index]) {
+      style.removeChild(childNodes[index]);
+    }
+
+    if (childNodes.length) {
+      style.insertBefore(cssNode, childNodes[index]);
+    } else {
+      style.appendChild(cssNode);
+    }
+  }
+}
+
+function applyToTag(style, options, obj) {
+  var css = obj.css;
+  var media = obj.media;
+  var sourceMap = obj.sourceMap;
+
+  if (media) {
+    style.setAttribute('media', media);
+  } else {
+    style.removeAttribute('media');
+  }
+
+  if (sourceMap && typeof btoa !== 'undefined') {
+    css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */");
+  } // For old IE
+
+  /* istanbul ignore if  */
+
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    while (style.firstChild) {
+      style.removeChild(style.firstChild);
+    }
+
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var singleton = null;
+var singletonCounter = 0;
+
+function addStyle(obj, options) {
+  var style;
+  var update;
+  var remove;
+
+  if (options.singleton) {
+    var styleIndex = singletonCounter++;
+    style = singleton || (singleton = insertStyleElement(options));
+    update = applyToSingletonTag.bind(null, style, styleIndex, false);
+    remove = applyToSingletonTag.bind(null, style, styleIndex, true);
+  } else {
+    style = insertStyleElement(options);
+    update = applyToTag.bind(null, style, options);
+
+    remove = function remove() {
+      removeStyleElement(style);
+    };
+  }
+
+  update(obj);
+  return function updateStyle(newObj) {
+    if (newObj) {
+      if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {
+        return;
+      }
+
+      update(obj = newObj);
+    } else {
+      remove();
+    }
+  };
+}
+
+module.exports = function (list, options) {
+  options = options || {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
+  // tags it will allow on a page
+
+  if (!options.singleton && typeof options.singleton !== 'boolean') {
+    options.singleton = isOldIE();
+  }
+
+  list = list || [];
+  var lastIdentifiers = modulesToDom(list, options);
+  return function update(newList) {
+    newList = newList || [];
+
+    if (Object.prototype.toString.call(newList) !== '[object Array]') {
+      return;
+    }
+
+    for (var i = 0; i < lastIdentifiers.length; i++) {
+      var identifier = lastIdentifiers[i];
+      var index = getIndexByIdentifier(identifier);
+      stylesInDom[index].references--;
+    }
+
+    var newLastIdentifiers = modulesToDom(newList, options);
+
+    for (var _i = 0; _i < lastIdentifiers.length; _i++) {
+      var _identifier = lastIdentifiers[_i];
+
+      var _index = getIndexByIdentifier(_identifier);
+
+      if (stylesInDom[_index].references === 0) {
+        stylesInDom[_index].updater();
+
+        stylesInDom.splice(_index, 1);
+      }
+    }
+
+    lastIdentifiers = newLastIdentifiers;
+  };
+};
+
+/***/ })
+
+}]);
diff --git a/examples/chunk-optimization/dist/webpack-5/965.js b/examples/chunk-optimization/dist/webpack-5/965.js
@@ -0,0 +1,50 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[965],{
+
+/***/ 173:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(609);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
+// Imports
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, "body {\n  background: snow;\n}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
+/***/ 965:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(62);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_cjs_js_main_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(173);
+
+
+
+var options = {};
+
+options.insert = "head";
+options.singleton = false;
+
+var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_main_css__WEBPACK_IMPORTED_MODULE_1__/* .default */ .Z, options);
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_main_css__WEBPACK_IMPORTED_MODULE_1__/* .default.locals */ .Z.locals || {});
+
+/***/ })
+
+}]);
diff --git a/examples/chunk-optimization/dist/webpack-5/entryA.html b/examples/chunk-optimization/dist/webpack-5/entryA.html
@@ -0,0 +1 @@
+<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="libMath.js"></script><script defer="defer" src="libText.js"></script><script defer="defer" src="219.js"></script><script defer="defer" src="965.js"></script><script defer="defer" src="entryA.js"></script></head><body></body></html>
diff --git a/examples/chunk-optimization/dist/webpack-5/entryA.js b/examples/chunk-optimization/dist/webpack-5/entryA.js
@@ -0,0 +1,184 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 727:
+/***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
+
+__webpack_require__(965);
+var multiply = __webpack_require__(179);
+var concat = __webpack_require__(631);
+var h1 = document.createElement('h1');
+h1.innerHTML = concat('Hello world from Entry ', multiply(1, 1));
+document.body.appendChild(h1);
+
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		if(__webpack_module_cache__[moduleId]) {
+/******/ 			return __webpack_module_cache__[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			id: moduleId,
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = __webpack_modules__;
+/******/ 	
+/******/ 	// the startup function
+/******/ 	// It's empty as some runtime module handles the default behavior
+/******/ 	__webpack_require__.x = x => {};
+/************************************************************************/
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/jsonp chunk loading */
+/******/ 	(() => {
+/******/ 		// no baseURI
+/******/ 		
+/******/ 		// object to store loaded and loading chunks
+/******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 		// Promise = chunk loading, 0 = chunk loaded
+/******/ 		var installedChunks = {
+/******/ 			938: 0
+/******/ 		};
+/******/ 		
+/******/ 		var deferredModules = [
+/******/ 			[727,494,491,219,965]
+/******/ 		];
+/******/ 		// no chunk on demand loading
+/******/ 		
+/******/ 		// no prefetching
+/******/ 		
+/******/ 		// no preloaded
+/******/ 		
+/******/ 		// no HMR
+/******/ 		
+/******/ 		// no HMR manifest
+/******/ 		
+/******/ 		var checkDeferredModules = x => {};
+/******/ 		
+/******/ 		// install a JSONP callback for chunk loading
+/******/ 		var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ 			var [chunkIds, moreModules, runtime, executeModules] = data;
+/******/ 			// add "moreModules" to the modules object,
+/******/ 			// then flag all "chunkIds" as loaded and fire callback
+/******/ 			var moduleId, chunkId, i = 0, resolves = [];
+/******/ 			for(;i < chunkIds.length; i++) {
+/******/ 				chunkId = chunkIds[i];
+/******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ 					resolves.push(installedChunks[chunkId][0]);
+/******/ 				}
+/******/ 				installedChunks[chunkId] = 0;
+/******/ 			}
+/******/ 			for(moduleId in moreModules) {
+/******/ 				if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ 					__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 				}
+/******/ 			}
+/******/ 			if(runtime) runtime(__webpack_require__);
+/******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ 			while(resolves.length) {
+/******/ 				resolves.shift()();
+/******/ 			}
+/******/ 		
+/******/ 			// add entry modules from loaded chunk to deferred list
+/******/ 			if(executeModules) deferredModules.push.apply(deferredModules, executeModules);
+/******/ 		
+/******/ 			// run deferred modules when all chunks ready
+/******/ 			return checkDeferredModules();
+/******/ 		}
+/******/ 		
+/******/ 		var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
+/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ 		
+/******/ 		function checkDeferredModulesImpl() {
+/******/ 			var result;
+/******/ 			for(var i = 0; i < deferredModules.length; i++) {
+/******/ 				var deferredModule = deferredModules[i];
+/******/ 				var fulfilled = true;
+/******/ 				for(var j = 1; j < deferredModule.length; j++) {
+/******/ 					var depId = deferredModule[j];
+/******/ 					if(installedChunks[depId] !== 0) fulfilled = false;
+/******/ 				}
+/******/ 				if(fulfilled) {
+/******/ 					deferredModules.splice(i--, 1);
+/******/ 					result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
+/******/ 				}
+/******/ 			}
+/******/ 			if(deferredModules.length === 0) {
+/******/ 				__webpack_require__.x();
+/******/ 				__webpack_require__.x = x => {};
+/******/ 			}
+/******/ 			return result;
+/******/ 		}
+/******/ 		var startup = __webpack_require__.x;
+/******/ 		__webpack_require__.x = () => {
+/******/ 			// reset startup function so it can be called again when more startup code is added
+/******/ 			__webpack_require__.x = startup || (x => {});
+/******/ 			return (checkDeferredModules = checkDeferredModulesImpl)();
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// run startup
+/******/ 	var __webpack_exports__ = __webpack_require__.x();
+/******/ 	
+/******/ })()
+;
diff --git a/examples/chunk-optimization/dist/webpack-5/entryB.html b/examples/chunk-optimization/dist/webpack-5/entryB.html
@@ -0,0 +1 @@
+<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="libMath.js"></script><script defer="defer" src="219.js"></script><script defer="defer" src="965.js"></script><script defer="defer" src="entryB.js"></script></head><body></body></html>
diff --git a/examples/chunk-optimization/dist/webpack-5/entryB.js b/examples/chunk-optimization/dist/webpack-5/entryB.js
@@ -0,0 +1,183 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 282:
+/***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
+
+__webpack_require__(965);
+var multiply = __webpack_require__(179);
+var h1 = document.createElement('h1');
+h1.innerHTML = 'Hello world from Entry ' + multiply(1, 2);
+document.body.appendChild(h1);
+
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		if(__webpack_module_cache__[moduleId]) {
+/******/ 			return __webpack_module_cache__[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			id: moduleId,
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = __webpack_modules__;
+/******/ 	
+/******/ 	// the startup function
+/******/ 	// It's empty as some runtime module handles the default behavior
+/******/ 	__webpack_require__.x = x => {};
+/************************************************************************/
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/jsonp chunk loading */
+/******/ 	(() => {
+/******/ 		// no baseURI
+/******/ 		
+/******/ 		// object to store loaded and loading chunks
+/******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 		// Promise = chunk loading, 0 = chunk loaded
+/******/ 		var installedChunks = {
+/******/ 			513: 0
+/******/ 		};
+/******/ 		
+/******/ 		var deferredModules = [
+/******/ 			[282,494,219,965]
+/******/ 		];
+/******/ 		// no chunk on demand loading
+/******/ 		
+/******/ 		// no prefetching
+/******/ 		
+/******/ 		// no preloaded
+/******/ 		
+/******/ 		// no HMR
+/******/ 		
+/******/ 		// no HMR manifest
+/******/ 		
+/******/ 		var checkDeferredModules = x => {};
+/******/ 		
+/******/ 		// install a JSONP callback for chunk loading
+/******/ 		var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ 			var [chunkIds, moreModules, runtime, executeModules] = data;
+/******/ 			// add "moreModules" to the modules object,
+/******/ 			// then flag all "chunkIds" as loaded and fire callback
+/******/ 			var moduleId, chunkId, i = 0, resolves = [];
+/******/ 			for(;i < chunkIds.length; i++) {
+/******/ 				chunkId = chunkIds[i];
+/******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ 					resolves.push(installedChunks[chunkId][0]);
+/******/ 				}
+/******/ 				installedChunks[chunkId] = 0;
+/******/ 			}
+/******/ 			for(moduleId in moreModules) {
+/******/ 				if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ 					__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 				}
+/******/ 			}
+/******/ 			if(runtime) runtime(__webpack_require__);
+/******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ 			while(resolves.length) {
+/******/ 				resolves.shift()();
+/******/ 			}
+/******/ 		
+/******/ 			// add entry modules from loaded chunk to deferred list
+/******/ 			if(executeModules) deferredModules.push.apply(deferredModules, executeModules);
+/******/ 		
+/******/ 			// run deferred modules when all chunks ready
+/******/ 			return checkDeferredModules();
+/******/ 		}
+/******/ 		
+/******/ 		var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
+/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ 		
+/******/ 		function checkDeferredModulesImpl() {
+/******/ 			var result;
+/******/ 			for(var i = 0; i < deferredModules.length; i++) {
+/******/ 				var deferredModule = deferredModules[i];
+/******/ 				var fulfilled = true;
+/******/ 				for(var j = 1; j < deferredModule.length; j++) {
+/******/ 					var depId = deferredModule[j];
+/******/ 					if(installedChunks[depId] !== 0) fulfilled = false;
+/******/ 				}
+/******/ 				if(fulfilled) {
+/******/ 					deferredModules.splice(i--, 1);
+/******/ 					result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
+/******/ 				}
+/******/ 			}
+/******/ 			if(deferredModules.length === 0) {
+/******/ 				__webpack_require__.x();
+/******/ 				__webpack_require__.x = x => {};
+/******/ 			}
+/******/ 			return result;
+/******/ 		}
+/******/ 		var startup = __webpack_require__.x;
+/******/ 		__webpack_require__.x = () => {
+/******/ 			// reset startup function so it can be called again when more startup code is added
+/******/ 			__webpack_require__.x = startup || (x => {});
+/******/ 			return (checkDeferredModules = checkDeferredModulesImpl)();
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// run startup
+/******/ 	var __webpack_exports__ = __webpack_require__.x();
+/******/ 	
+/******/ })()
+;
diff --git a/examples/chunk-optimization/dist/webpack-5/entryC.html b/examples/chunk-optimization/dist/webpack-5/entryC.html
@@ -0,0 +1 @@
+<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="libMath.js"></script><script defer="defer" src="libText.js"></script><script defer="defer" src="219.js"></script><script defer="defer" src="965.js"></script><script defer="defer" src="entryA.js"></script><script defer="defer" src="entryB.js"></script></head><body></body></html>
diff --git a/...nk-optimization/dist/webpack-4/libMath.js → ...nk-optimization/dist/webpack-5/libMath.js b/...nk-optimization/dist/webpack-4/libMath.js → ...nk-optimization/dist/webpack-5/libMath.js
@@ -1,9 +1,9 @@
-(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[494],{
 
-/***/ 1:
-/***/ (function(module, exports, __webpack_require__) {
+/***/ 179:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
-var sum = __webpack_require__(7);
+var sum = __webpack_require__(971);
 module.exports = function multiply (a, b) {
   var m = 0;
   for (var i = 0; i < a; i = sum(i, 1)) {
@@ -15,8 +15,8 @@ module.exports = function multiply (a, b) {
 
 /***/ }),
 
-/***/ 7:
-/***/ (function(module, exports) {
+/***/ 971:
+/***/ ((module) => {
 
 module.exports = function sum (a, b) {
   return a + b;

diff --git a/examples/chunk-optimization/dist/webpack-5/libText.js b/examples/chunk-optimization/dist/webpack-5/libText.js
@@ -0,0 +1,13 @@
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[491],{
+
+/***/ 631:
+/***/ ((module) => {
+
+module.exports = function concat (a, b) {
+  return String(a) + String(b);
+};
+
+
+/***/ })
+
+}]);
diff --git a/examples/chunk-optimization/webpack.config.js b/examples/chunk-optimization/webpack.config.js
@@ -15,8 +15,8 @@ module.exports = {
   },
   module: {
     rules: [
-      { test: /\.css$/, loader: 'style-loader!css-loader' },
-      { test: /\.png$/, loader: 'file-loader' }
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+      { test: /\.png$/, type: 'asset/resource' }
     ]
   },
   optimization: {
@@ -25,7 +25,7 @@ module.exports = {
       minSize: 0,
       maxAsyncRequests: 9,
       maxInitialRequests: 9,
-      name: true,
+      name: false,
       cacheGroups: {
         libMath: {
           test: /lib-(multiply|sum)/,

diff --git a/examples/custom-insertion-position/dist/webpack-5/bundle.js b/examples/custom-insertion-position/dist/webpack-5/bundle.js
@@ -0,0 +1,8 @@
+/******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
+var h1 = document.createElement('h1');
+h1.innerHTML = 'Hello world!';
+document.body.appendChild(h1);
+
+/******/ })()
+;
diff --git a/examples/custom-insertion-position/dist/webpack-5/index.html b/examples/custom-insertion-position/dist/webpack-5/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="bundle.js"></script>
+    <title>Custom insertion example</title>
+  </head>
+  <body>
+    All scripts are placed here:
+
+    <script>console.log("Executed after all other scripts")</script>
+  </body>
+</html>
diff --git a/examples/custom-insertion-position/example.js b/examples/custom-insertion-position/example.js
@@ -0,0 +1,3 @@
+var h1 = document.createElement('h1');
+h1.innerHTML = 'Hello world!';
+document.body.appendChild(h1);
diff --git a/examples/custom-insertion-position/index.ejs b/examples/custom-insertion-position/index.ejs
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <%= htmlWebpackPlugin.tags.headTags %>
+    <title>Custom insertion example</title>
+  </head>
+  <body>
+    All scripts are placed here:
+    <%= htmlWebpackPlugin.tags.bodyTags %>
+    <script>console.log("Executed after all other scripts")</script>
+  </body>
+</html>
diff --git a/examples/custom-insertion-position/readme.md b/examples/custom-insertion-position/readme.md
@@ -0,0 +1,24 @@
+# custom insertion example
+
+This example shows how you can define the position where the scripts are injected
+by setting `inject:false` and using the template parameters inside the `index.ejs`
+
+The example is using the template parameters `headTags` and `bodyTags`
+
+```
+<%= htmlWebpackPlugin.tags.headTags %>
+<%= htmlWebpackPlugin.tags.bodyTags %>
+```
+
+`headTags` and `bodyTags` are arrays so you can use any Array.prototype function like `filter`:
+
+```
+<%= htmlWebpackPlugin
+  .tags
+  .headTags
+  .filter((tag) => tag.tagName === 'meta')
+  .join('') 
+%>
+```
+
+For further information about the tag object take a look at the `createHtmlTagObject` inside `lib/html-tags.js` or at the `prepareAssetTagGroupForRendering` inside `index.js`.
diff --git a/examples/custom-insertion-position/webpack.config.js b/examples/custom-insertion-position/webpack.config.js
@@ -0,0 +1,25 @@
+var path = require('path');
+var HtmlWebpackPlugin = require('../..');
+var webpackMajorVersion = require('webpack/package.json').version.split('.')[0];
+module.exports = {
+  context: __dirname,
+  entry: './example.js',
+  output: {
+    path: path.join(__dirname, 'dist/webpack-' + webpackMajorVersion),
+    publicPath: '',
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'index.ejs',
+      inject: false,
+      // The following settings are optional and only used for
+      // demo purposes:
+      meta: {
+        charset: { charset: 'utf-8' },
+        viewport: 'width=device-width, initial-scale=1'
+      },
+      minify: false
+    })
+  ]
+};
diff --git a/examples/custom-template/dist/webpack-4/bundle.js b/examples/custom-template/dist/webpack-4/bundle.js
diff --git a/examples/custom-template/dist/webpack-4/index.html b/examples/custom-template/dist/webpack-4/index.html
diff --git a/...ck-4/0714810ae3fb211173e2964249507195.png → ...e/dist/webpack-5/55b19870aff2e53d1fb1.png b/...ck-4/0714810ae3fb211173e2964249507195.png → ...e/dist/webpack-5/55b19870aff2e53d1fb1.png
diff --git a/examples/custom-template/dist/webpack-5/bundle.js b/examples/custom-template/dist/webpack-5/bundle.js
@@ -0,0 +1,63 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 636:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		if(__webpack_module_cache__[moduleId]) {
+/******/ 			return __webpack_module_cache__[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+__webpack_require__(636);
+var h1 = document.createElement('h1');
+h1.innerHTML = 'Hello world!';
+document.body.appendChild(h1);
+
+})();
+
+/******/ })()
+;
diff --git a/examples/custom-template/dist/webpack-5/index.html b/examples/custom-template/dist/webpack-5/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><h2>Partial</h2><img src="55b19870aff2e53d1fb1.png"></body></html>
diff --git a/examples/appcache/dist/webpack-4/styles.css → ...custom-template/dist/webpack-5/styles.css b/examples/appcache/dist/webpack-4/styles.css → ...custom-template/dist/webpack-5/styles.css
diff --git a/examples/custom-template/readme.md b/examples/custom-template/readme.md
@@ -1,4 +1,4 @@
 # custom template
 
 This example uses a custom underscore template which inlines an partial using the html-loader:
-`<%= require('html-loader!./partial.html') %>`
+`<%= require('html-loader!./partial.html').default %>`
diff --git a/examples/custom-template/template.html b/examples/custom-template/template.html
@@ -6,6 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
-  <%= require('html-loader!./partial.html') %>
+  <%= require('html-loader!./partial.html').default %>
 </body>
 </html>
diff --git a/examples/custom-template/webpack.config.js b/examples/custom-template/webpack.config.js
@@ -14,7 +14,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' }
+      { test: /\.png$/, type: 'asset/resource' }
     ]
   },
   plugins: [

diff --git a/examples/default/dist/webpack-4/bundle.js b/examples/default/dist/webpack-4/bundle.js
diff --git a/examples/default/dist/webpack-5/bundle.js b/examples/default/dist/webpack-5/bundle.js
diff --git a/examples/default/dist/webpack-4/index.html → examples/default/dist/webpack-5/index.html b/examples/default/dist/webpack-4/index.html → examples/default/dist/webpack-5/index.html
@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><script src="bundle.js"></script></body></html>
+<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="bundle.js"></script></head><body></body></html>
diff --git a/examples/default/webpack.config.js b/examples/default/webpack.config.js
@@ -12,8 +12,8 @@ module.exports = {
   },
   module: {
     rules: [
-      { test: /\.css$/, loader: 'style-loader!css-loader' },
-      { test: /\.png$/, loader: 'file-loader' }
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+      { test: /\.png$/, type: 'asset/resource' }
     ]
   },
   plugins: [

diff --git a/examples/favicon/dist/webpack-4/bundle.js b/examples/favicon/dist/webpack-4/bundle.js
diff --git a/examples/favicon/dist/webpack-4/favicon.html b/examples/favicon/dist/webpack-4/favicon.html
diff --git a/examples/favicon/dist/webpack-5/bundle.js b/examples/favicon/dist/webpack-5/bundle.js
@@ -0,0 +1,63 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 636:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		if(__webpack_module_cache__[moduleId]) {
+/******/ 			return __webpack_module_cache__[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+__webpack_require__(636);
+var h1 = document.createElement('h1');
+h1.innerHTML = 'Hello world!';
+document.body.appendChild(h1);
+
+})();
+
+/******/ })()
+;
diff --git a/examples/favicon/dist/webpack-5/favicon.html b/examples/favicon/dist/webpack-5/favicon.html
@@ -0,0 +1 @@
+<!doctype html><html><head><meta charset="utf-8"><title>HtmlWebpackPlugin example</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body></body></html>
diff --git a/examples/favicon/dist/webpack-4/favicon.ico → examples/favicon/dist/webpack-5/favicon.ico b/examples/favicon/dist/webpack-4/favicon.ico → examples/favicon/dist/webpack-5/favicon.ico
diff --git a/...custom-template/dist/webpack-4/styles.css → examples/favicon/dist/webpack-5/styles.css b/...custom-template/dist/webpack-4/styles.css → examples/favicon/dist/webpack-5/styles.css
diff --git a/examples/favicon/webpack.config.js b/examples/favicon/webpack.config.js
@@ -14,7 +14,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' }
+      { test: /\.png$/, type: 'asset/resource' }
     ]
   },
   plugins: [

diff --git a/examples/html-loader/dist/webpack-4/about.html b/examples/html-loader/dist/webpack-4/about.html
diff --git a/examples/html-loader/dist/webpack-4/bundle.js b/examples/html-loader/dist/webpack-4/bundle.js
diff --git a/examples/html-loader/dist/webpack-4/index.html b/examples/html-loader/dist/webpack-4/index.html
diff --git a/examples/appcache/logo.png → ...r/dist/webpack-5/55b19870aff2e53d1fb1.png b/examples/appcache/logo.png → ...r/dist/webpack-5/55b19870aff2e53d1fb1.png
diff --git a/examples/html-loader/dist/webpack-5/about.html b/examples/html-loader/dist/webpack-5/about.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="55b19870aff2e53d1fb1.png"></body></html>
diff --git a/examples/html-loader/dist/webpack-5/bundle.js b/examples/html-loader/dist/webpack-5/bundle.js
@@ -0,0 +1,63 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 636:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		if(__webpack_module_cache__[moduleId]) {
+/******/ 			return __webpack_module_cache__[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+__webpack_require__(636);
+var h1 = document.createElement('h1');
+h1.innerHTML = 'Hello world!';
+document.body.appendChild(h1);
+
+})();
+
+/******/ })()
+;
diff --git a/...es/html-loader/dist/webpack-4/favicon.ico → ...es/html-loader/dist/webpack-5/favicon.ico b/...es/html-loader/dist/webpack-4/favicon.ico → ...es/html-loader/dist/webpack-5/favicon.ico
diff --git a/examples/html-loader/dist/webpack-5/index.html b/examples/html-loader/dist/webpack-5/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="55b19870aff2e53d1fb1.png"></body></html>
diff --git a/examples/favicon/dist/webpack-4/styles.css → ...les/html-loader/dist/webpack-5/styles.css b/examples/favicon/dist/webpack-4/styles.css → ...les/html-loader/dist/webpack-5/styles.css
diff --git a/examples/html-loader/webpack.config.js b/examples/html-loader/webpack.config.js
@@ -14,7 +14,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' },
+      { test: /\.png$/, type: 'asset/resource' },
       { test: /\.html$/, loader: 'html-loader' }
     ]
   },

diff --git a/examples/inline/dist/webpack-4/bundle.js b/examples/inline/dist/webpack-4/bundle.js
diff --git a/examples/inline/dist/webpack-4/index.html b/examples/inline/dist/webpack-4/index.html
diff --git a/examples/inline/dist/webpack-5/bundle.js b/examples/inline/dist/webpack-5/bundle.js
@@ -0,0 +1,63 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 636:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		if(__webpack_module_cache__[moduleId]) {
+/******/ 			return __webpack_module_cache__[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+
+__webpack_require__(636);
+
+console.log('Hello World');
+
+})();
+
+/******/ })()
+;
diff --git a/examples/inline/dist/webpack-4/favicon.ico → examples/inline/dist/webpack-5/favicon.ico b/examples/inline/dist/webpack-4/favicon.ico → examples/inline/dist/webpack-5/favicon.ico
diff --git a/examples/inline/dist/webpack-5/index.html b/examples/inline/dist/webpack-5/index.html
@@ -0,0 +1,65 @@
+<!doctype html><html><head><meta charset="utf-8"><title>pug demo</title></head><body><style>body {
+  background: snow;
+}</style><script>/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 636:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		if(__webpack_module_cache__[moduleId]) {
+/******/ 			return __webpack_module_cache__[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+
+__webpack_require__(636);
+
+console.log('Hello World');
+
+})();
+
+/******/ })()
+;</script></body></html>
diff --git a/...les/html-loader/dist/webpack-4/styles.css → examples/inline/dist/webpack-5/styles.css b/...les/html-loader/dist/webpack-4/styles.css → examples/inline/dist/webpack-5/styles.css
diff --git a/examples/javascript-advanced/dist/webpack-4/bundle.js b/examples/javascript-advanced/dist/webpack-4/bundle.js
diff --git a/examples/javascript-advanced/dist/webpack-4/index.html b/examples/javascript-advanced/dist/webpack-4/index.html
diff --git a/...ck-4/0714810ae3fb211173e2964249507195.png → ...d/dist/webpack-5/55b19870aff2e53d1fb1.png b/...ck-4/0714810ae3fb211173e2964249507195.png → ...d/dist/webpack-5/55b19870aff2e53d1fb1.png
diff --git a/examples/javascript-advanced/dist/webpack-5/bundle.js b/examples/javascript-advanced/dist/webpack-5/bundle.js
@@ -0,0 +1,80 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 144:
+/***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
+
+eval("__webpack_require__(636);\n\nvar universal = __webpack_require__(184);\nvar h1 = document.createElement('h1');\nh1.innerHTML = universal();\n\ndocument.body.appendChild(h1);\n\n\n//# sourceURL=webpack:///./example.js?");
+
+/***/ }),
+
+/***/ 184:
+/***/ ((module) => {
+
+"use strict";
+eval("// This file is used for frontend and backend\n\n\n// If compiled by the html-webpack-plugin\n// HTML_WEBPACK_PLUGIN is set to true:\nvar backend = typeof HTML_WEBPACK_PLUGIN !== 'undefined';\n\nmodule.exports = function () {\n  return 'Hello World from ' + (backend ? 'backend' : 'frontend');\n};\n\n\n//# sourceURL=webpack:///./universial.js?");
+
+/***/ }),
+
+/***/ 636:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n\n\n//# sourceURL=webpack:///./main.css?");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		if(__webpack_module_cache__[moduleId]) {
+/******/ 			return __webpack_module_cache__[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = __webpack_require__(144);
+/******/ 	
+/******/ })()
+;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="libMath.js"></script><script defer="defer" src="libText.js"></script><script defer="defer" src="219.js"></script><script defer="defer" src="965.js"></script><script defer="defer" src="entryA.js"></script></head><body></body></html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body><h2>Partial</h2><img src="55b19870aff2e53d1fb1.png"></body></html>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><script src="bundle.js"></script></body></html>
		<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="bundle.js"></script></head><body></body></html>