feat: add full support for public paths inside templates

Author: jantimon

index.js

@@ -117,7 +117,7 @@ class HtmlWebpackPlugin {
    * @param {string} templateFilename
    * @returns {Promise<string | (() => string | Promise<string>)>}
    */
-  evaluateCompilationResult (source, templateFilename) {
+  evaluateCompilationResult (source, publicPath, templateFilename) {
     if (!source) {
       return Promise.reject(new Error('The child compilation didn\'t provide a result'));
     }
@@ -127,7 +127,7 @@ class HtmlWebpackPlugin {
       source += ';\nHTML_WEBPACK_PLUGIN_RESULT';
     }
     const templateWithoutLoaders = templateFilename.replace(/^.+!/, '').replace(/\?.+$/, '');
-    const vmContext = vm.createContext({ HTML_WEBPACK_PLUGIN: true, require: require, ...global });
+    const vmContext = vm.createContext({ HTML_WEBPACK_PLUGIN: true, require: require, htmlWebpackPluginPublicPath: publicPath, ...global });
     const vmScript = new vm.Script(source, { filename: templateWithoutLoaders });
     // Evaluate code and cast to string
     let newSource;
@@ -327,7 +327,7 @@ function hookIntoCompiler (compiler, options, plugin) {
               // Once everything is compiled evaluate the html factory
               // and replace it with its content
               return ('compiledEntry' in templateResult)
-                ? plugin.evaluateCompilationResult(templateResult.compiledEntry.content, options.template)
+                ? plugin.evaluateCompilationResult(templateResult.compiledEntry.content, htmlPublicPath, options.template)
                 : Promise.reject(new Error('Child compilation contained no compiledEntry'));
             });
           const templateExectutionPromise = Promise.all([assetsPromise, assetTagGroupsPromise, templateEvaluationPromise])

lib/child-compiler.js

@@ -88,9 +88,7 @@ class HtmlWebpackChildCompiler {
 
     const outputOptions = {
       filename: '__child-[name]',
-      publicPath: mainCompilation.outputOptions.publicPath === 'auto'
-        ? ''
-        : mainCompilation.outputOptions.publicPath,
+      publicPath: '',
       library: {
         type: 'var',
         name: 'HTML_WEBPACK_PLUGIN_RESULT'
@@ -116,6 +114,7 @@ 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, template, `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
     });
 

spec/basic.spec.js

@@ -2584,4 +2584,51 @@ describe('HtmlWebpackPlugin', () => {
       ]
     }, ['<script defer="defer" src="index_bundle.js"></script>'], null, done);
   });
+
+  it('generates relative path for asset/resource', done => {
+    testHtmlPlugin({
+      mode: 'development',
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'index_bundle.js',
+        assetModuleFilename: 'assets/demo[ext]'
+      },
+      module: {
+        rules: [
+          { test: /\.png$/, type: 'asset/resource' }
+        ]
+      },
+      plugins: [
+        new HtmlWebpackPlugin({
+          template: 'html-loader!' + path.join(__dirname, 'fixtures/logo.html'),
+          filename: 'demo/index.js'
+        })
+      ]
+    }, ['<img src="../assets/demo.png'], 'demo/index.js', done);
+  });
+
+  it('uses the absolute path for asset/resource', done => {
+    testHtmlPlugin({
+      mode: 'development',
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'index_bundle.js',
+        assetModuleFilename: 'assets/demo[ext]'
+      },
+      module: {
+        rules: [
+          { test: /\.png$/, type: 'asset/resource' }
+        ]
+      },
+      plugins: [
+        new HtmlWebpackPlugin({
+          template: 'html-loader!' + path.join(__dirname, 'fixtures/logo.html'),
+          filename: 'demo/index.js',
+          publicPath: '/foo/'
+        })
+      ]
+    }, ['<img src="/foo/assets/demo.png'], 'demo/index.js', done);
+  });
 });

spec/fixtures/logo.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en" manifest="foo.appcache">
+<head>
+  <meta charset="utf-8">
+  <title>Example Plain file</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+  <img src="./logo.png" />
+</body>
+</html>