html-webpack-plugin 5.1.0 → 5.2.0

package/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)
 
 

package/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

package/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 = [];

package/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"
   },