fix: html plugin v4

fixes #63

Author: shirotech

module.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const createSri = require('sri-create');
 
 const empty = '';
@@ -50,7 +51,7 @@ class WebpackCdnPlugin {
     const getArgs = [this.url, this.prefix, this.prod, output.publicPath];
 
     compiler.hooks.compilation.tap('WebpackCdnPlugin', (compilation) => {
-      compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration.tapAsync(
+      WebpackCdnPlugin._getHtmlHook(compilation, 'beforeAssetTagGeneration', 'htmlWebpackPluginBeforeHtmlGeneration').tapAsync(
         'WebpackCdnPlugin',
         (data, callback) => {
           const moduleId = data.plugin.options.cdnModule;
@@ -66,6 +67,12 @@ class WebpackCdnPlugin {
 
               modules = modules.filter((module) => module.version);
 
+              if (output.publicPath === empty) {
+                data.assets.js.forEach((item, i) => {
+                  data.assets.js[i] = data.assets.js[i].replace(data.assets.publicPath, empty);
+                });
+              }
+
               data.assets.js = WebpackCdnPlugin._getJs(modules, ...getArgs).concat(data.assets.js);
               data.assets.css = WebpackCdnPlugin._getCss(modules, ...getArgs).concat(
                 data.assets.css,
@@ -93,7 +100,7 @@ class WebpackCdnPlugin {
       compiler.hooks.afterPlugins.tap('WebpackCdnPlugin', () => {
         compiler.hooks.thisCompilation.tap('WebpackCdnPlugin', () => {
           compiler.hooks.compilation.tap('HtmlWebpackPluginHooks', (compilation) => {
-            compilation.hooks.htmlWebpackPluginAlterAssetTags.tapPromise(
+            WebpackCdnPlugin._getHtmlHook(compilation, 'alterAssetTags', 'htmlWebpackPluginAlterAssetTags').tapPromise(
               'WebpackCdnPlugin',
               this.alterAssetTags.bind(this),
             );
@@ -138,8 +145,16 @@ class WebpackCdnPlugin {
         }
       }
     };
-    await Promise.all(pluginArgs.head.filter(filterTag).map(processTag));
-    await Promise.all(pluginArgs.body.filter(filterTag).map(processTag));
+
+    /* istanbul ignore if */
+    /* istanbul ignore else */
+    if (pluginArgs.assetTags) {
+      await Promise.all(pluginArgs.assetTags.scripts.filter(filterTag).map(processTag));
+      await Promise.all(pluginArgs.assetTags.styles.filter(filterTag).map(processTag));
+    } else {
+      await Promise.all(pluginArgs.head.filter(filterTag).map(processTag));
+      await Promise.all(pluginArgs.body.filter(filterTag).map(processTag));
+    }
   }
 
   /**
@@ -265,6 +280,16 @@ class WebpackCdnPlugin {
 
     return files;
   }
+
+  static _getHtmlHook(compilation, v4Name, v3Name) {
+    try {
+      /* istanbul ignore next */
+      return HtmlWebpackPlugin.getHooks(compilation)[v4Name] || compilation.hooks[v3Name];
+    } catch (e) {
+      /* istanbul ignore next */
+      return compilation.hooks[v3Name];
+    }
+  }
 }
 
 module.exports = WebpackCdnPlugin;

package.json

@@ -57,7 +57,7 @@
     "eslint": "6.8.0",
     "eslint-config-airbnb-base": "14.1.0",
     "eslint-plugin-import": "^2.20.2",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4.0.4",
     "husky": "^4.2.3",
     "jasmine": "^3.5.0",
     "jasmine-spec-reporter": "^5.0.1",

spec/webpack.spec.js

@@ -2,10 +2,9 @@ const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const WebpackCdnPlugin = require('../module');
-const createSri = require('sri-create');
 
-const cssMatcher = /<link href="(.+?)" rel="stylesheet"( crossorigin="anonymous")?( integrity="sha.+")?>/g;
-const jsMatcher = /<script type="text\/javascript" src="([^"]+?)"( crossorigin="anonymous")?( integrity="sha[^"]+")?>/g;
+const cssMatcher = /<link href="([^"]+?)" rel="stylesheet"( crossorigin="anonymous")?( integrity="sha.[^"]+?")?>/g;
+const jsMatcher = /<script(?: type="text\/javascript")? src="([^"]+?)"( crossorigin="anonymous")?( integrity="sha[^"]+?")?>/g;
 
 let cssAssets;
 let jsAssets;
@@ -52,7 +51,9 @@ function runWebpack(callback, config) {
     const html = stats.compilation.assets['../index.html'].source();
     const html2 = stats.compilation.assets['../index2.html'].source();
 
-    let matches, sriMatches;
+    let matches;
+    let sriMatches;
+
     while ((matches = cssMatcher.exec(html))) {
       cssAssets.push(matches[1]);
       cssCrossOrigin.push(/crossorigin="anonymous"/.test(matches[2]));
@@ -109,7 +110,7 @@ function getConfig({
     output.publicPath = publicPath2;
   }
 
-  var modules = [
+  let modules = [
     { name: 'jasmine-spec-reporter', path: 'index.js' },
     {
       name: 'nyc',
@@ -123,7 +124,7 @@ function getConfig({
     if (sri === 'jasmine') {
       if (moduleProdUrl) {
         modules = [
-          { name: 'jasmine', path: 'lib/jasmine.js' }
+          { name: 'jasmine', path: 'lib/jasmine.js' },
         ];
       } else {
         modules = [
@@ -138,10 +139,10 @@ function getConfig({
     }
   }
   if (moduleProdUrl) {
-    modules[modules.length-1].prodUrl = moduleProdUrl;
+    modules[modules.length - 1].prodUrl = moduleProdUrl;
   }
   if (moduleDevUrl) {
-    modules[modules.length-1].devUrl = moduleDevUrl;
+    modules[modules.length - 1].devUrl = moduleDevUrl;
   }
   if (multiple) {
     modules = {
@@ -429,7 +430,6 @@ describe('Webpack Integration', () => {
         expect(jsSri).toEqual([]);
       });
     });
-
   });
 
   describe('When `prod` is false', () => {
@@ -521,7 +521,7 @@ describe('Webpack Integration', () => {
       beforeAll((done) => {
         runWebpack(done, getConfig({
           prod: false,
-          moduleDevUrl: ":name/dist/:path",
+          moduleDevUrl: ':name/dist/:path',
         }));
       });