feat: Add publicPath option to overrule the default path generation (#1516)

Author: jantimon

README.md

@@ -138,6 +138,7 @@ Allowed values are as follows
 |**`templateContent`**|`{string\|Function\|false}`|false| Can be used instead of `template` to provide an inline template - please read the [Writing Your Own Templates](https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates) section |
 |**`templateParameters`**|`{Boolean\|Object\|Function}`| `false`| Allows to overwrite the parameters used in the template - see [example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/template-parameters) |
 |**`inject`**|`{Boolean\|String}`|`true`|`true \|\| 'head' \|\| 'body' \|\| false` Inject all assets into the given `template` or `templateContent`. When passing `true` or `'body'` all javascript resources will be placed at the bottom of the body element. `'head'` will place the scripts in the head element - see the [inject:false example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/custom-insertion-position)|
+|**`publicPath`**|`{String|'auto'}`|`'auto'`|The publicPath used for script and link tags|
 |**`scriptLoading`**|`{'blocking'\|'defer'}`|`'blocking'`| Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. |
 |**`favicon`**|`{String}`|``|Adds the given favicon path to the output HTML|
 |**`meta`**|`{Object}`|`{}`|Allows to inject `meta`-tags. E.g. `meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`|

index.js

@@ -44,6 +44,7 @@ class HtmlWebpackPlugin {
       templateContent: false,
       templateParameters: templateParametersGenerator,
       filename: 'index.html',
+      publicPath: userOptions.publicPath === undefined ? 'auto' : userOptions.publicPath,
       hash: false,
       inject: userOptions.scriptLoading !== 'defer' ? 'body' : 'head',
       scriptLoading: 'blocking',
@@ -167,7 +168,7 @@ class HtmlWebpackPlugin {
         const isCompilationCached = templateResult.mainCompilationHash !== compilation.hash;
 
         // Turn the entry point names into file paths
-        const assets = self.htmlWebpackPluginAssets(compilation, childCompilationOutputName, sortedEntryNames);
+        const assets = self.htmlWebpackPluginAssets(compilation, childCompilationOutputName, sortedEntryNames, this.options.publicPath);
 
         // If the template and the assets did not change we don't have to emit the html
         const assetJson = JSON.stringify(self.getAssetFiles(assets));
@@ -519,6 +520,7 @@ class HtmlWebpackPlugin {
    * for all given entry names
    * @param {WebpackCompilation} compilation
    * @param {string[]} entryNames
+   * @param {string | 'auto'} customPublicPath
    * @returns {{
       publicPath: string,
       js: Array<string>,
@@ -527,7 +529,7 @@ class HtmlWebpackPlugin {
       favicon?: string
     }}
    */
-  htmlWebpackPluginAssets (compilation, childCompilationOutputName, entryNames) {
+  htmlWebpackPluginAssets (compilation, childCompilationOutputName, entryNames, customPublicPath) {
     const compilationHash = compilation.hash;
 
     /**
@@ -539,13 +541,22 @@ class HtmlWebpackPlugin {
       ? compilation.mainTemplate.getPublicPath({ hash: compilationHash })
       : compilation.getAssetPath(compilation.outputOptions.publicPath, { hash: compilationHash });
 
-    const isPublicPathDefined = webpackPublicPath.trim() !== '';
-    let publicPath = isPublicPathDefined
-      // If a hard coded public path exists use it
-      ? webpackPublicPath
-      // If no public path was set get a relative url path
-      : path.relative(path.resolve(compilation.options.output.path, path.dirname(childCompilationOutputName)), compilation.options.output.path)
-        .split(path.sep).join('/');
+    const isPublicPathDefined = webpackMajorVersion === 4
+      ? webpackPublicPath.trim() !== ''
+      // Webpack 5 introduced "auto" - however it can not be retrieved at runtime
+      : webpackPublicPath.trim() !== '' && webpackPublicPath !== 'auto';
+
+    let publicPath =
+      // If the html-webpack-plugin options contain a custom public path uset it
+      customPublicPath !== 'auto'
+        ? customPublicPath
+        : (isPublicPathDefined
+          // If a hard coded public path exists use it
+          ? webpackPublicPath
+          // If no public path was set get a relative url path
+          : path.relative(path.resolve(compilation.options.output.path, path.dirname(childCompilationOutputName)), compilation.options.output.path)
+            .split(path.sep).join('/')
+        );
 
     if (publicPath.length && publicPath.substr(-1, 1) !== '/') {
       publicPath += '/';

typings.d.ts

@@ -63,6 +63,11 @@ declare namespace HtmlWebpackPlugin {
      * @default 'index.html'
      */
     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
+     */
+    publicPath: string | 'auto';
     /**
      * If `true` then append a unique `webpack` compilation hash to all included scripts and CSS files.
      * This is useful for cache busting