fix: support loaders like raw-loader

Author: jantimon

index.js

@@ -123,7 +123,9 @@ class HtmlWebpackPlugin {
     }
     // The LibraryTemplatePlugin stores the template result in a local variable.
     // To extract the result during the evaluation this part has to be removed.
-    source = source.replace('var HTML_WEBPACK_PLUGIN_RESULT =', '');
+    if (source && 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, ...global });
     const vmScript = new vm.Script(source, { filename: templateWithoutLoaders });

lib/child-compiler.js

@@ -75,7 +75,6 @@ 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;
@@ -95,18 +94,17 @@ class HtmlWebpackChildCompiler {
         name: 'HTML_WEBPACK_PLUGIN_RESULT'
       },
       /** @type {'text/javascript'} */
-      scriptType: (/** @type {'text/javascript'} */'text/javascript'),
-      iife: false
+      scriptType: (/** @type {'text/javascript'} */'text/javascript')
     };
     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, [
       // Compile the template to nodejs javascript
-      new NodeTemplatePlugin(outputOptions),
       new NodeTargetPlugin(),
-      new LoaderTargetPlugin('node')
+      new LoaderTargetPlugin('node'),
+      new webpack.library.EnableLibraryPlugin('var')
     ]);
     // The file path context which webpack uses to resolve all relative files to
     childCompiler.context = mainCompilation.compiler.context;

package.json

@@ -41,12 +41,13 @@
     "mini-css-extract-plugin": "1.0.0",
     "pug": "2.0.3",
     "pug-loader": "2.4.0",
+    "raw-loader": "4.0.2",
     "rimraf": "2.6.3",
     "semistandard": "^13.0.1",
     "standard-version": "9.0.0",
     "style-loader": "0.23.1",
     "typescript": "4.0.5",
-    "webpack": "5.4.0",
+    "webpack": "5.10.0",
     "webpack-recompilation-simulator": "3.2.0"
   },
   "dependencies": {

spec/basic.spec.js

@@ -519,6 +519,26 @@ describe('HtmlWebpackPlugin', () => {
     }, ['<link href="styles.css" rel="stylesheet">'], null, done);
   });
 
+  it('works with a javascript returning loader like raw-loader', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      module: {
+        rules: [
+          { test: /\.html$/, use: ['raw-loader'] }
+        ]
+      },
+      output: {
+        path: OUTPUT_DIR,
+        filename: '[name].js'
+      },
+      plugins: [new HtmlWebpackPlugin({
+        inject: true,
+        template: path.join(__dirname, 'fixtures/plain.html')
+      })]
+    }, ['<script defer="defer" src="main.js"', '<title>Example Plain file</title>'], null, done);
+  });
+
   it('should work with the css extract plugin on windows and protocol relative urls support (#205)', done => {
     testHtmlPlugin({
       mode: 'production',