fix: use webpack sources of the current webpack compiler instance

Author: jantimon

index.js

@@ -15,7 +15,6 @@ const fs = require('fs');
 const _ = require('lodash');
 const path = require('path');
 const loaderUtils = require('loader-utils');
-const webpack = require('webpack');
 const { CachedChildCompilation } = require('./lib/cached-child-compiler');
 
 const { createHtmlTagObject, htmlTagObjectToString, HtmlTagArray } = require('./lib/html-tags');
@@ -145,11 +144,12 @@ class HtmlWebpackPlugin {
 
 /**
  * apply is called by the webpack main compiler during the start phase
- * @param {WebpackCompiler} compiler
+ * @param {import('webpack').Compiler} compiler
  * @param {ProcessedHtmlWebpackOptions} options
  * @param {HtmlWebpackPlugin} plugin
  */
 function hookIntoCompiler (compiler, options, plugin) {
+  const webpack = compiler.webpack;
   // Instance variables to keep caching information
   // for multiple builds
   let assetJson;
@@ -166,7 +166,8 @@ function hookIntoCompiler (compiler, options, plugin) {
   // generate it at correct location
   const filename = options.filename;
   if (path.resolve(filename) === path.normalize(filename)) {
-    options.filename = path.relative(compiler.options.output.path, filename);
+    const outputPath = /** @type {string} - Once initialized the path is always a string */(compiler.options.output.path);
+    options.filename = path.relative(outputPath, filename);
   }
 
   // `contenthash` is introduced in webpack v4.3

lib/child-compiler.js

@@ -14,9 +14,7 @@
 const NodeTemplatePlugin = require('webpack/lib/node/NodeTemplatePlugin');
 const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
 const LoaderTargetPlugin = require('webpack/lib/LoaderTargetPlugin');
-const LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin');
 const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
-const Compilation = require('webpack').Compilation;
 
 let instanceId = 0;
 /**
@@ -74,35 +72,43 @@ class HtmlWebpackChildCompiler {
    * This function will start the template compilation
    * once it is started no more templates can be added
    *
-   * @param {WebpackCompilation} mainCompilation
+   * @param {import('Webpack').Compilation} mainCompilation
    * @returns {Promise<{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}>}
    */
   compileTemplates (mainCompilation) {
+    const webpack = mainCompilation.compiler.webpack;
+    const Compilation = webpack.Compilation;
+
     // To prevent multiple compilations for the same template
     // the compilation is cached in a promise.
     // If it already exists return
     if (this.compilationPromise) {
       return this.compilationPromise;
     }
 
-    // The entry file is just an empty helper as the dynamic template
-    // require is added in "loader.js"
     const outputOptions = {
       filename: '__child-[name]',
-      publicPath: mainCompilation.outputOptions.publicPath
+      publicPath: mainCompilation.outputOptions.publicPath,
+      library: {
+        type: 'var',
+        name: 'HTML_WEBPACK_PLUGIN_RESULT'
+      },
+      /** @type {'text/javascript'} */
+      scriptType: (/** @type {'text/javascript'} */'text/javascript'),
+      iife: false
     };
     const compilerName = 'HtmlWebpackCompiler';
     // Create an additional child compiler which takes the template
     // and turns it into an Node.JS html factory.
     // This allows us to use loaders during the compilation
-    const childCompiler = mainCompilation.createChildCompiler(compilerName, outputOptions);
+    const childCompiler = mainCompilation.createChildCompiler(compilerName, outputOptions, [
+      // Compile the template to nodejs javascript
+      new NodeTemplatePlugin(outputOptions),
+      new NodeTargetPlugin(),
+      new LoaderTargetPlugin('node')
+    ]);
     // The file path context which webpack uses to resolve all relative files to
     childCompiler.context = mainCompilation.compiler.context;
-    // Compile the template to nodejs javascript
-    new NodeTemplatePlugin(outputOptions).apply(childCompiler);
-    new NodeTargetPlugin().apply(childCompiler);
-    new LibraryTemplatePlugin('HTML_WEBPACK_PLUGIN_RESULT', 'var').apply(childCompiler);
-    new LoaderTargetPlugin('node').apply(childCompiler);
 
     // Generate output file names
     const temporaryTemplateNames = this.templates.map((template, index) => `__child-HtmlWebpackPlugin_${index}-${this.id}`);
@@ -138,14 +144,14 @@ class HtmlWebpackChildCompiler {
           ? extractedAssets.map((asset) => asset.source())
           : [];
         // Extract file dependencies
-        if (entries) {
+        if (entries && childCompilation) {
           this.fileDependencies = { fileDependencies: Array.from(childCompilation.fileDependencies), contextDependencies: Array.from(childCompilation.contextDependencies), missingDependencies: Array.from(childCompilation.missingDependencies) };
         }
         // Reject the promise if the childCompilation contains error
         if (childCompilation && childCompilation.errors && childCompilation.errors.length) {
           const errorDetails = childCompilation.errors.map(error => {
             let message = error.message;
-            if (error.error) {
+            if ('error' in error) {
               message += ':\n' + error.error;
             }
             if (error.stack) {
@@ -161,6 +167,10 @@ class HtmlWebpackChildCompiler {
           reject(err);
           return;
         }
+        if (!childCompilation || !entries) {
+          reject(new Error('Empty child compilation'));
+          return;
+        }
         /**
          * @type {{[templatePath: string]: { content: string, hash: string, entry: WebpackChunk }}}
          */

typings.d.ts

@@ -25,8 +25,17 @@ declare class HtmlWebpackPlugin {
 
 declare namespace HtmlWebpackPlugin {
   type MinifyOptions = HtmlMinifierOptions;
-
-  interface Options extends Partial<ProcessedOptions> {}
+  /**
+   * The file to write the HTML to.
+   * Supports subdirectories eg: `assets/admin.html`
+   * [name] will be replaced by the entry name
+   * Supports a function to generate the name
+   *
+   * @default 'index.html'
+   */
+  interface Options extends Partial<ProcessedOptions> {
+    filename: string | ((entryName: string) => string);
+  }
 
   /**
    * The plugin options after adding default values
@@ -65,7 +74,7 @@ declare namespace HtmlWebpackPlugin {
      *
      * @default 'index.html'
      */
-    filename: string | ((entryName: string) => string);
+    filename: string
     /**
      * By default the public path is set to `auto` - that way the html-webpack-plugin will try
      * to set the publicPath according to the current filename and the webpack publicPath setting