feat: Add publicPath support relative path

Author: Wind4

index.js

@@ -517,6 +517,21 @@ class HtmlWebpackPlugin {
     return assets.js.length && assets.js.every((assetPath) => /\.hot-update\.js$/.test(assetPath));
   }
 
+  /**
+   * Check the path is a absolute url path
+   *
+   * @param {string | undefined} path
+   */
+  isAbsolutePath (path) {
+    if (typeof path === 'undefined' || path === '') return false;
+    // If the path start with '/'
+    if (path.indexOf('/') === 0) return true;
+    // If the path contain the '://' scheme
+    if (path.indexOf('://') !== -1) return true;
+
+    return false;
+  }
+
   /**
    * The htmlWebpackPluginAssets extracts the asset information of a webpack compilation
    * for all given entry names
@@ -535,13 +550,13 @@ class HtmlWebpackPlugin {
 
     /**
      * @type {string} the configured public path to the asset root
-     * if a publicPath is set in the current webpack config use it otherwise
+     * if the absolute path publicPath is set in the current webpack config use it otherwise
      * fallback to a realtive path
      */
-    let publicPath = typeof compilation.options.output.publicPath !== 'undefined'
-      // If a hard coded public path exists use it
+    let publicPath = this.isAbsolutePath(compilation.options.output.publicPath)
+      // If a absolute path is set in the publicPath use it
       ? compilation.mainTemplate.getPublicPath({hash: compilationHash})
-      // If no public path was set get a relative url path
+      // If publicPath was a relative path get the realtive path
       : path.relative(path.resolve(compilation.options.output.path, path.dirname(childCompilationOutputName)), compilation.options.output.path)
         .split(path.sep).join('/');
 

spec/basic.spec.js

@@ -485,6 +485,51 @@ describe('HtmlWebpackPlugin', () => {
     }, ['<link href="styles.css?%hash%"'], null, done);
   });
 
+  it('should allow to add cache hashes to with the css assets', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/theme.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'index_bundle.js',
+        publicPath: 'some/'
+      },
+      module: {
+        rules: [
+          { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
+        ]
+      },
+      plugins: [
+        new HtmlWebpackPlugin({hash: true}),
+        new MiniCssExtractPlugin({filename: 'styles.css'})
+      ]
+    }, ['<link href="styles.css?%hash%"'], null, done);
+  });
+
+  it('should allow to add cache hashes to with the css assets', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/theme.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'index_bundle.js',
+        publicPath: 'some/'
+      },
+      module: {
+        rules: [
+          { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
+        ]
+      },
+      plugins: [
+        new HtmlWebpackPlugin({
+          hash: true,
+          filename: path.resolve(OUTPUT_DIR, 'subfolder', 'test.html')
+        }),
+        new MiniCssExtractPlugin({filename: 'styles.css'})
+      ]
+    }, ['<link href="../styles.css?%hash%"'], path.join('subfolder', 'test.html'), done);
+  });
+
   it('should inject css files when using the extract text plugin', done => {
     testHtmlPlugin({
       mode: 'production',
@@ -550,6 +595,19 @@ describe('HtmlWebpackPlugin', () => {
     }, ['<link href="styles.css" rel="stylesheet"/>'], null, done);
   });
 
+  it('prepends the webpack public path to relative path', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'index_bundle.js',
+        publicPath: 'assets/'
+      },
+      plugins: [new HtmlWebpackPlugin()]
+    }, ['<script src="index_bundle.js"'], null, done);
+  });
+
   it('prepends the webpack public path to script src', done => {
     testHtmlPlugin({
       mode: 'production',
@@ -575,7 +633,35 @@ describe('HtmlWebpackPlugin', () => {
     }, ['<script src="assets/index_bundle.js"'], null, done);
   });
 
-  it('handles subdirectories in the webpack output bundles along with a public path', done => {
+  it('handles subdirectories in the webpack output bundles along with a relative path', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'assets/index_bundle.js',
+        publicPath: 'some/'
+      },
+      plugins: [new HtmlWebpackPlugin()]
+    }, ['<script src="assets/index_bundle.js"'], null, done);
+  });
+
+  it('handles subdirectories in the webpack output bundles along with a relative path', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'assets/index_bundle.js',
+        publicPath: 'some/'
+      },
+      plugins: [new HtmlWebpackPlugin({
+        filename: path.resolve(OUTPUT_DIR, 'subfolder', 'test.html')
+      })]
+    }, ['<script src="../assets/index_bundle.js"'], path.join('subfolder', 'test.html'), done);
+  });
+
+  it('handles subdirectories in the webpack output bundles along with a absolute path', done => {
     testHtmlPlugin({
       mode: 'production',
       entry: path.join(__dirname, 'fixtures/index.js'),
@@ -1433,7 +1519,42 @@ describe('HtmlWebpackPlugin', () => {
     }, [/<link rel="shortcut icon" href="\/some\/+[^"]+\.ico">/], null, done);
   });
 
-  it('adds a favicon with a publichPath set to [hash]/ and replaces the hash', done => {
+  it('adds a favicon with publicPath set to some/', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        publicPath: 'some/',
+        filename: 'index_bundle.js'
+      },
+      plugins: [
+        new HtmlWebpackPlugin({
+          favicon: path.join(__dirname, 'fixtures/favicon.ico')
+        })
+      ]
+    }, [/<link rel="shortcut icon" href="[^"]+\.ico">/], null, done);
+  });
+
+  it('adds a favicon with publicPath set to some/', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        publicPath: 'some/',
+        filename: 'index_bundle.js'
+      },
+      plugins: [
+        new HtmlWebpackPlugin({
+          favicon: path.join(__dirname, 'fixtures/favicon.ico'),
+          filename: path.resolve(OUTPUT_DIR, 'subfolder', 'test.html')
+        })
+      ]
+    }, [/<link rel="shortcut icon" href="\.\.\/[^"]+\.ico">/], path.join('subfolder', 'test.html'), done);
+  });
+
+  it('adds a favicon with a publichPath set to /[hash]/ and replaces the hash', done => {
     testHtmlPlugin({
       mode: 'production',
       entry: path.join(__dirname, 'fixtures/index.js'),
@@ -1450,6 +1571,23 @@ describe('HtmlWebpackPlugin', () => {
     }, [/<link rel="shortcut icon" href="\/[a-z0-9]{20}\/favicon\.ico">/], null, done);
   });
 
+  it('adds a favicon with a publichPath set to [hash]/ and replaces the hash', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: path.join(__dirname, 'fixtures/index.js'),
+      output: {
+        path: OUTPUT_DIR,
+        publicPath: '[hash]/',
+        filename: 'index_bundle.js'
+      },
+      plugins: [
+        new HtmlWebpackPlugin({
+          favicon: path.join(__dirname, 'fixtures/favicon.ico')
+        })
+      ]
+    }, [/<link rel="shortcut icon" href="favicon\.ico">/], null, done);
+  });
+
   it('adds a favicon with inject enabled', done => {
     testHtmlPlugin({
       mode: 'production',