diff --git a/CHANGELOG.md b/CHANGELOG.md
index b3b7a006..d8dd04c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [5.2.0](https://github.com/jantimon/html-webpack-plugin/compare/v5.1.0...v5.2.0) (2021-02-19)
+
+
+### Features
+
+* improve ssr ([73d2a66](https://github.com/jantimon/html-webpack-plugin/commit/73d2a660b10b9ebf8a341f0ddb173bcaaf1e513c))
+
 ## [5.1.0](https://github.com/jantimon/html-webpack-plugin/compare/v5.0.0...v5.1.0) (2021-02-12)
 
 
diff --git a/examples/chunk-optimization/dist/webpack-5/entryA.js b/examples/chunk-optimization/dist/webpack-5/entryA.js
index 1c9f5e6c..1c761428 100644
--- a/examples/chunk-optimization/dist/webpack-5/entryA.js
+++ b/examples/chunk-optimization/dist/webpack-5/entryA.js
@@ -176,7 +176,9 @@ document.body.appendChild(h1);
 /******/ 	})();
 /******/ 	
 /************************************************************************/
+/******/ 	
 /******/ 	// run startup
-/******/ 	__webpack_require__.x();
+/******/ 	var __webpack_exports__ = __webpack_require__.x();
+/******/ 	
 /******/ })()
 ;
\ No newline at end of file
diff --git a/examples/chunk-optimization/dist/webpack-5/entryB.js b/examples/chunk-optimization/dist/webpack-5/entryB.js
index ef7e44f5..2c0fa57a 100644
--- a/examples/chunk-optimization/dist/webpack-5/entryB.js
+++ b/examples/chunk-optimization/dist/webpack-5/entryB.js
@@ -175,7 +175,9 @@ document.body.appendChild(h1);
 /******/ 	})();
 /******/ 	
 /************************************************************************/
+/******/ 	
 /******/ 	// run startup
-/******/ 	__webpack_require__.x();
+/******/ 	var __webpack_exports__ = __webpack_require__.x();
+/******/ 	
 /******/ })()
 ;
\ No newline at end of file
diff --git a/examples/chunk-optimization/webpack.config.js b/examples/chunk-optimization/webpack.config.js
index 4ab211ea..d7d38679 100755
--- a/examples/chunk-optimization/webpack.config.js
+++ b/examples/chunk-optimization/webpack.config.js
@@ -16,7 +16,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' }
+      { test: /\.png$/, type: 'asset/resource' }
     ]
   },
   optimization: {
diff --git a/examples/custom-insertion-position/dist/webpack-5/bundle.js b/examples/custom-insertion-position/dist/webpack-5/bundle.js
index a81d487b..68fc1b11 100644
--- a/examples/custom-insertion-position/dist/webpack-5/bundle.js
+++ b/examples/custom-insertion-position/dist/webpack-5/bundle.js
@@ -1,4 +1,5 @@
 /******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
 var h1 = document.createElement('h1');
 h1.innerHTML = 'Hello world!';
 document.body.appendChild(h1);
diff --git a/examples/custom-template/dist/webpack-5/55b19870aff2e53d1fb1a258c1032fbf.png b/examples/custom-template/dist/webpack-5/55b19870aff2e53d1fb1.png
similarity index 100%
rename from examples/custom-template/dist/webpack-5/55b19870aff2e53d1fb1a258c1032fbf.png
rename to examples/custom-template/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
index 635cfad1..62ede7bd 100644
--- a/examples/custom-template/dist/webpack-5/bundle.js
+++ b/examples/custom-template/dist/webpack-5/bundle.js
@@ -49,6 +49,8 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	})();
 /******/ 	
 /************************************************************************/
+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');
diff --git a/examples/custom-template/dist/webpack-5/index.html b/examples/custom-template/dist/webpack-5/index.html
index 11d3a9ed..62a7defc 100644
--- a/examples/custom-template/dist/webpack-5/index.html
+++ b/examples/custom-template/dist/webpack-5/index.html
@@ -1 +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="55b19870aff2e53d1fb1a258c1032fbf.png"></body></html>
\ No newline at end of file
+<!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>
\ No newline at end of file
diff --git a/examples/custom-template/readme.md b/examples/custom-template/readme.md
index cff7f28a..05829192 100644
--- 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
index 75e6ef43..1ffee6cd 100644
--- 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
index b22dfd3a..b20de1c8 100755
--- 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-5/bundle.js b/examples/default/dist/webpack-5/bundle.js
index 1b49ba90..6f94dfe5 100644
--- a/examples/default/dist/webpack-5/bundle.js
+++ b/examples/default/dist/webpack-5/bundle.js
@@ -464,6 +464,8 @@ module.exports = function (list, options) {
 /******/ 	})();
 /******/ 	
 /************************************************************************/
+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__(965);
 var h1 = document.createElement('h1');
diff --git a/examples/default/webpack.config.js b/examples/default/webpack.config.js
index aa1e8e0b..21cf98ba 100755
--- a/examples/default/webpack.config.js
+++ b/examples/default/webpack.config.js
@@ -13,7 +13,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' }
+      { test: /\.png$/, type: 'asset/resource' }
     ]
   },
   plugins: [
diff --git a/examples/favicon/dist/webpack-5/bundle.js b/examples/favicon/dist/webpack-5/bundle.js
index 635cfad1..62ede7bd 100644
--- a/examples/favicon/dist/webpack-5/bundle.js
+++ b/examples/favicon/dist/webpack-5/bundle.js
@@ -49,6 +49,8 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	})();
 /******/ 	
 /************************************************************************/
+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');
diff --git a/examples/favicon/webpack.config.js b/examples/favicon/webpack.config.js
index c1139fa4..2a06d880 100755
--- 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-5/55b19870aff2e53d1fb1a258c1032fbf.png b/examples/html-loader/dist/webpack-5/55b19870aff2e53d1fb1.png
similarity index 100%
rename from examples/html-loader/dist/webpack-5/55b19870aff2e53d1fb1a258c1032fbf.png
rename to examples/html-loader/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
index d4a1bc60..1d9bfc7c 100644
--- a/examples/html-loader/dist/webpack-5/about.html
+++ b/examples/html-loader/dist/webpack-5/about.html
@@ -1 +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="55b19870aff2e53d1fb1a258c1032fbf.png"></body></html>
\ No newline at end of file
+<!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>
\ No newline at end of file
diff --git a/examples/html-loader/dist/webpack-5/bundle.js b/examples/html-loader/dist/webpack-5/bundle.js
index 635cfad1..62ede7bd 100644
--- a/examples/html-loader/dist/webpack-5/bundle.js
+++ b/examples/html-loader/dist/webpack-5/bundle.js
@@ -49,6 +49,8 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	})();
 /******/ 	
 /************************************************************************/
+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');
diff --git a/examples/html-loader/dist/webpack-5/index.html b/examples/html-loader/dist/webpack-5/index.html
index d4a1bc60..1d9bfc7c 100644
--- a/examples/html-loader/dist/webpack-5/index.html
+++ b/examples/html-loader/dist/webpack-5/index.html
@@ -1 +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="55b19870aff2e53d1fb1a258c1032fbf.png"></body></html>
\ No newline at end of file
+<!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>
\ No newline at end of file
diff --git a/examples/html-loader/webpack.config.js b/examples/html-loader/webpack.config.js
index 1183fb81..f89973c5 100755
--- 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-5/bundle.js b/examples/inline/dist/webpack-5/bundle.js
index c071dcd6..e8487f4b 100644
--- a/examples/inline/dist/webpack-5/bundle.js
+++ b/examples/inline/dist/webpack-5/bundle.js
@@ -49,6 +49,8 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	})();
 /******/ 	
 /************************************************************************/
+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);
diff --git a/examples/inline/dist/webpack-5/index.html b/examples/inline/dist/webpack-5/index.html
index 1cdce1c3..c401f660 100644
--- a/examples/inline/dist/webpack-5/index.html
+++ b/examples/inline/dist/webpack-5/index.html
@@ -51,6 +51,8 @@
 /******/ 	})();
 /******/ 	
 /************************************************************************/
+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);
diff --git a/examples/javascript-advanced/dist/webpack-5/55b19870aff2e53d1fb1a258c1032fbf.png b/examples/javascript-advanced/dist/webpack-5/55b19870aff2e53d1fb1.png
similarity index 100%
rename from examples/javascript-advanced/dist/webpack-5/55b19870aff2e53d1fb1a258c1032fbf.png
rename to examples/javascript-advanced/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
index f4b198a1..21942cec 100644
--- a/examples/javascript-advanced/dist/webpack-5/bundle.js
+++ b/examples/javascript-advanced/dist/webpack-5/bundle.js
@@ -9,6 +9,13 @@
 /******/ (() => { // 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) => {
 
@@ -63,9 +70,11 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
 /******/ 	})();
 /******/ 	
 /************************************************************************/
-(() => {
-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?");
-})();
-
+/******/ 	
+/******/ 	// 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);
+/******/ 	
 /******/ })()
 ;
\ No newline at end of file
diff --git a/examples/javascript-advanced/dist/webpack-5/index.html b/examples/javascript-advanced/dist/webpack-5/index.html
index 888493f3..216fe107 100644
--- a/examples/javascript-advanced/dist/webpack-5/index.html
+++ b/examples/javascript-advanced/dist/webpack-5/index.html
@@ -1 +1 @@
-<html><head><title>Webpack App</title><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body>Hello World from backend -<h2>Partial</h2><img src="55b19870aff2e53d1fb1a258c1032fbf.png"></body></html>
\ No newline at end of file
+<html><head><title>Webpack App</title><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head><body>Hello World from backend -<h2>Partial</h2><img src="55b19870aff2e53d1fb1.png"></body></html>
\ No newline at end of file
diff --git a/examples/javascript-advanced/template.js b/examples/javascript-advanced/template.js
index bd0f7058..2b006a25 100644
--- a/examples/javascript-advanced/template.js
+++ b/examples/javascript-advanced/template.js
@@ -1,5 +1,5 @@
 // Webpack require:
-var partial = require('./partial.html');
+var partial = require('./partial.html').default;
 var universal = require('./universial.js');
 
 // Export a function / promise / or a string:
diff --git a/examples/javascript-advanced/webpack.config.js b/examples/javascript-advanced/webpack.config.js
index 1449a690..a8e1af64 100644
--- a/examples/javascript-advanced/webpack.config.js
+++ b/examples/javascript-advanced/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/javascript/dist/webpack-5/bundle.js b/examples/javascript/dist/webpack-5/bundle.js
index 19f621e1..75d23d21 100644
--- a/examples/javascript/dist/webpack-5/bundle.js
+++ b/examples/javascript/dist/webpack-5/bundle.js
@@ -67,6 +67,8 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	})();
 /******/ 	
 /************************************************************************/
+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);
 
diff --git a/examples/javascript/dist/webpack-5/index.html b/examples/javascript/dist/webpack-5/index.html
index 6f4d6a5e..4d6f5e77 100644
--- a/examples/javascript/dist/webpack-5/index.html
+++ b/examples/javascript/dist/webpack-5/index.html
@@ -1 +1 @@
-<head><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head>Hello World from backend2021-01-14T14:20:54.163Z<h2>Partial</h2><img src="55b19870aff2e53d1fb1.png">
\ No newline at end of file
+<head><script defer="defer" src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head>Hello World from backend2021-02-19T13:58:22.479Z<h2>Partial</h2><img src="55b19870aff2e53d1fb1.png">
\ No newline at end of file
diff --git a/examples/javascript/template.js b/examples/javascript/template.js
index cbc74163..33ca1b57 100644
--- a/examples/javascript/template.js
+++ b/examples/javascript/template.js
@@ -1,5 +1,5 @@
 // Webpack require:
-var partial = require('./partial.html');
+var partial = require('./partial.html').default;
 var universal = require('./universial.js');
 
 // Export a function / promise / or a string:
diff --git a/examples/multi-page/dist/webpack-5/first.js b/examples/multi-page/dist/webpack-5/first.js
index 1b49ba90..6f94dfe5 100644
--- a/examples/multi-page/dist/webpack-5/first.js
+++ b/examples/multi-page/dist/webpack-5/first.js
@@ -464,6 +464,8 @@ module.exports = function (list, options) {
 /******/ 	})();
 /******/ 	
 /************************************************************************/
+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__(965);
 var h1 = document.createElement('h1');
diff --git a/examples/multi-page/dist/webpack-5/second.js b/examples/multi-page/dist/webpack-5/second.js
index 1b49ba90..6f94dfe5 100644
--- a/examples/multi-page/dist/webpack-5/second.js
+++ b/examples/multi-page/dist/webpack-5/second.js
@@ -464,6 +464,8 @@ module.exports = function (list, options) {
 /******/ 	})();
 /******/ 	
 /************************************************************************/
+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__(965);
 var h1 = document.createElement('h1');
diff --git a/examples/multi-page/webpack.config.js b/examples/multi-page/webpack.config.js
index d8005c73..addf311b 100755
--- a/examples/multi-page/webpack.config.js
+++ b/examples/multi-page/webpack.config.js
@@ -16,7 +16,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
-      { test: /\.png$/, loader: 'file-loader' }
+      { test: /\.png$/, type: 'asset/resource' }
     ]
   },
   plugins: [
diff --git a/examples/pug-loader/dist/webpack-5/bundle.js b/examples/pug-loader/dist/webpack-5/bundle.js
index 9f33d64a..4b3da8a7 100644
--- a/examples/pug-loader/dist/webpack-5/bundle.js
+++ b/examples/pug-loader/dist/webpack-5/bundle.js
@@ -328,6 +328,8 @@ function pug_rethrow(err, filename, lineno, str){
 /******/ 	})();
 /******/ 	
 /************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be in strict mode.
 (() => {
 "use strict";
 
diff --git a/examples/pug-loader/webpack.config.js b/examples/pug-loader/webpack.config.js
index 32b78834..d674918a 100755
--- a/examples/pug-loader/webpack.config.js
+++ b/examples/pug-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: /\.pug$/, loader: 'pug-loader' }
     ]
   },
diff --git a/examples/sort-manually/dist/webpack-5/55b19870aff2e53d1fb1a258c1032fbf.png b/examples/sort-manually/dist/webpack-5/55b19870aff2e53d1fb1.png
similarity index 100%
rename from examples/sort-manually/dist/webpack-5/55b19870aff2e53d1fb1a258c1032fbf.png
rename to examples/sort-manually/dist/webpack-5/55b19870aff2e53d1fb1.png
diff --git a/examples/sort-manually/dist/webpack-5/a.js b/examples/sort-manually/dist/webpack-5/a.js
index 0165c13f..8a6b9450 100644
--- a/examples/sort-manually/dist/webpack-5/a.js
+++ b/examples/sort-manually/dist/webpack-5/a.js
@@ -49,6 +49,8 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 	})();
 /******/ 	
 /************************************************************************/
+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');
diff --git a/examples/sort-manually/dist/webpack-5/b.js b/examples/sort-manually/dist/webpack-5/b.js
index c850d4ad..855d0392 100644
--- a/examples/sort-manually/dist/webpack-5/b.js
+++ b/examples/sort-manually/dist/webpack-5/b.js
@@ -1,4 +1,5 @@
 /******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
 var h1 = document.createElement('h1');
 h1.innerHTML = 'b!';
 document.body.appendChild(h1);
diff --git a/examples/sort-manually/dist/webpack-5/c.js b/examples/sort-manually/dist/webpack-5/c.js
index e3031f95..334b9dd6 100644
--- a/examples/sort-manually/dist/webpack-5/c.js
+++ b/examples/sort-manually/dist/webpack-5/c.js
@@ -1,4 +1,5 @@
 /******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
 var h1 = document.createElement('h1');
 h1.innerHTML = 'c!';
 document.body.appendChild(h1);
diff --git a/examples/sort-manually/dist/webpack-5/d.js b/examples/sort-manually/dist/webpack-5/d.js
index 46e0e975..17f857db 100644
--- a/examples/sort-manually/dist/webpack-5/d.js
+++ b/examples/sort-manually/dist/webpack-5/d.js
@@ -1,4 +1,5 @@
 /******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
 var h1 = document.createElement('h1');
 h1.innerHTML = 'd!';
 document.body.appendChild(h1);
diff --git a/examples/sort-manually/dist/webpack-5/e.js b/examples/sort-manually/dist/webpack-5/e.js
index b017cb51..b8448b95 100644
--- a/examples/sort-manually/dist/webpack-5/e.js
+++ b/examples/sort-manually/dist/webpack-5/e.js
@@ -1,4 +1,5 @@
 /******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
 var h1 = document.createElement('h1');
 h1.innerHTML = 'e!';
 document.body.appendChild(h1);
diff --git a/examples/sort-manually/dist/webpack-5/first-file.html b/examples/sort-manually/dist/webpack-5/first-file.html
index 953bfed7..052442cb 100644
--- a/examples/sort-manually/dist/webpack-5/first-file.html
+++ b/examples/sort-manually/dist/webpack-5/first-file.html
@@ -1 +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"><script defer="defer" src="a.js"></script><script defer="defer" src="b.js"></script><script defer="defer" src="c.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="55b19870aff2e53d1fb1a258c1032fbf.png"></body></html>
\ No newline at end of file
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="a.js"></script><script defer="defer" src="b.js"></script><script defer="defer" src="c.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="55b19870aff2e53d1fb1.png"></body></html>
\ No newline at end of file
diff --git a/examples/sort-manually/dist/webpack-5/second-file.html b/examples/sort-manually/dist/webpack-5/second-file.html
index 205b4a9f..bf112e6e 100644
--- a/examples/sort-manually/dist/webpack-5/second-file.html
+++ b/examples/sort-manually/dist/webpack-5/second-file.html
@@ -1 +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"><script defer="defer" src="a.js"></script><script defer="defer" src="b.js"></script><script defer="defer" src="d.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="55b19870aff2e53d1fb1a258c1032fbf.png"></body></html>
\ No newline at end of file
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Example template</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="a.js"></script><script defer="defer" src="b.js"></script><script defer="defer" src="d.js"></script><link href="styles.css" rel="stylesheet"></head><body><img src="55b19870aff2e53d1fb1.png"></body></html>
\ No newline at end of file
diff --git a/examples/sort-manually/webpack.config.js b/examples/sort-manually/webpack.config.js
index 75ad9a7c..76d2fd34 100644
--- a/examples/sort-manually/webpack.config.js
+++ b/examples/sort-manually/webpack.config.js
@@ -19,7 +19,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/template-parameters/dist/webpack-5/bundle.js b/examples/template-parameters/dist/webpack-5/bundle.js
index a81d487b..68fc1b11 100644
--- a/examples/template-parameters/dist/webpack-5/bundle.js
+++ b/examples/template-parameters/dist/webpack-5/bundle.js
@@ -1,4 +1,5 @@
 /******/ (() => { // webpackBootstrap
+var __webpack_exports__ = {};
 var h1 = document.createElement('h1');
 h1.innerHTML = 'Hello world!';
 document.body.appendChild(h1);
diff --git a/index.js b/index.js
index bf11ee19..eb74aeb1 100644
--- a/index.js
+++ b/index.js
@@ -123,12 +123,20 @@ class HtmlWebpackPlugin {
       return Promise.reject(new Error('The child compilation didn\'t provide a result'));
     }
     // The LibraryTemplatePlugin stores the template result in a local variable.
-    // To extract the result during the evaluation this part has to be removed.
-    if (source && source.indexOf('HTML_WEBPACK_PLUGIN_RESULT') >= 0) {
+    // By adding it to the end the value gets extracted during evaluation
+    if (source.indexOf('HTML_WEBPACK_PLUGIN_RESULT') >= 0) {
       source += ';\nHTML_WEBPACK_PLUGIN_RESULT';
     }
     const templateWithoutLoaders = templateFilename.replace(/^.+!/, '').replace(/\?.+$/, '');
-    const vmContext = vm.createContext({ HTML_WEBPACK_PLUGIN: true, require: require, htmlWebpackPluginPublicPath: publicPath, ...global });
+    const vmContext = vm.createContext({
+      ...global,
+      HTML_WEBPACK_PLUGIN: true,
+      require: require,
+      htmlWebpackPluginPublicPath:
+      publicPath,
+      URL: require('url').URL,
+      __filename: templateWithoutLoaders
+    });
     const vmScript = new vm.Script(source, { filename: templateWithoutLoaders });
     // Evaluate code and cast to string
     let newSource;
@@ -147,7 +155,8 @@ class HtmlWebpackPlugin {
 }
 
 /**
- * apply is called by the webpack main compiler during the start phase
+ * connect the html-webpack-plugin to the webpack compiler lifecycle hooks
+ *
  * @param {import('webpack').Compiler} compiler
  * @param {ProcessedHtmlWebpackOptions} options
  * @param {HtmlWebpackPlugin} plugin
diff --git a/lib/child-compiler.js b/lib/child-compiler.js
index 664e0068..ea899c05 100644
--- a/lib/child-compiler.js
+++ b/lib/child-compiler.js
@@ -75,6 +75,7 @@ class HtmlWebpackChildCompiler {
     const webpack = mainCompilation.compiler.webpack;
     const Compilation = webpack.Compilation;
 
+    const NodeTemplatePlugin = webpack.node.NodeTemplatePlugin;
     const NodeTargetPlugin = webpack.node.NodeTargetPlugin;
     const LoaderTargetPlugin = webpack.LoaderTargetPlugin;
     const EntryPlugin = webpack.EntryPlugin;
@@ -103,6 +104,7 @@ class HtmlWebpackChildCompiler {
     const childCompiler = mainCompilation.createChildCompiler(compilerName, outputOptions, [
       // Compile the template to nodejs javascript
       new NodeTargetPlugin(),
+      new NodeTemplatePlugin(),
       new LoaderTargetPlugin('node'),
       new webpack.library.EnableLibraryPlugin('var')
     ]);
@@ -114,10 +116,18 @@ class HtmlWebpackChildCompiler {
 
     // Add all templates
     this.templates.forEach((template, index) => {
-      new EntryPlugin(childCompiler.context, 'data:text/javascript,__webpack_public_path__ = htmlWebpackPluginPublicPath;', `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
+      new EntryPlugin(childCompiler.context, 'data:text/javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;', `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
       new EntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
     });
 
+    // The templates are compiled and executed by NodeJS - similar to server side rendering
+    // Unfortunately this causes issues as some loaders require an absolute URL to support ES Modules
+    // The following config enables relative URL support for the child compiler
+    childCompiler.options.module = { ...childCompiler.options.module };
+    childCompiler.options.module.parser = { ...childCompiler.options.module.parser };
+    childCompiler.options.module.parser.javascript = { ...childCompiler.options.module.parser.javascript,
+      url: 'relative' };
+
     this.compilationStartedTimestamp = new Date().getTime();
     this.compilationPromise = new Promise((resolve, reject) => {
       const extractedAssets = [];
diff --git a/migration.md b/migration.md
index 1b04773f..120b80c2 100644
--- a/migration.md
+++ b/migration.md
@@ -83,7 +83,7 @@ For the above example you would have to configure a [html](https://github.com/we
 ```js
 module: {
   rules: [
-    {test: /\.png$/, loader: "file-loader"},
+    { test: /\.png$/, type: 'asset/resource' },
     {
       test: /\.html$/,
       exclude: /index\.html$/, // you need to exclude your base template (unless you do not want this plugin own templating feature)
diff --git a/package.json b/package.json
index 718bca71..cef91243 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-plugin",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "license": "MIT",
   "description": "Simplifies creation of HTML files to serve your webpack bundles",
   "author": "Jan Nicklas <j.nicklas@me.com> (https://github.com/jantimon)",
@@ -34,8 +34,7 @@
     "css-loader": "5.0.1",
     "cz-conventional-changelog": "2.1.0",
     "dir-compare": "1.7.2",
-    "file-loader": "6.2.0",
-    "html-loader": "1.3.2",
+    "html-loader": "2.0.0",
     "jest": "26.5.3",
     "mini-css-extract-plugin": "1.0.0",
     "pug": "2.0.3",
@@ -46,7 +45,7 @@
     "standard-version": "9.1.0",
     "style-loader": "2.0.0",
     "typescript": "4.1.3",
-    "webpack": "^5.20.0",
+    "webpack": "5.23.0",
     "webpack-recompilation-simulator": "3.2.0",
     "webpack-cli": "4.2.0"
   },