Updates for html-webpack-plugin and webpack v5 (#2651)

* Fix for some plugin weirdness

* v4/v5 fixes

Author: jeffposnick

package-lock.json

@@ -77,7 +77,8 @@
     "globby": "^11.0.1",
     "gulp": "^4.0.2",
     "gzip-size": "^5.1.1",
-    "html-webpack-plugin": "^4.5.0",
+    "html-webpack-plugin-v4": "npm:html-webpack-plugin@^4.5.0",
+    "html-webpack-plugin-v5": "npm:html-webpack-plugin@^5.0.0-alpha.5",
     "husky": "^4.2.5",
     "jsdoc": "^3.6.5",
     "jsdoc-baseline": "^0.1.5",
@@ -102,7 +103,7 @@
     "typescript": "^3.9.7",
     "upath": "^1.2.0",
     "webpack-v4": "npm:webpack@^4.44.2",
-    "webpack-v5": "npm:webpack@^5.0.0",
+    "webpack-v5": "npm:webpack@^5.1.0",
     "worker-plugin": "^5.0.0"
   }
 }

package.json

@@ -140,16 +140,10 @@ function filterAssets(compilation, config) {
   return filteredAssets;
 }
 
-module.exports = async (mainCompilation, config) => {
-  const filteredAssets = new Set();
-  // children will be set for, e.g., html-webpack-plugin.
-  for (const compilation of [mainCompilation, ...mainCompilation.children]) {
-    for (const asset of filterAssets(compilation, config)) {
-      filteredAssets.add(asset);
-    }
-  }
+module.exports = async (compilation, config) => {
+  const filteredAssets = filterAssets(compilation, config);
 
-  const {publicPath} = mainCompilation.options.output;
+  const {publicPath} = compilation.options.output;
 
   const fileDetails = Array.from(filteredAssets).map((asset) => {
     return {
@@ -166,10 +160,10 @@ module.exports = async (mainCompilation, config) => {
     manifestTransforms: config.manifestTransforms,
     maximumFileSizeToCacheInBytes: config.maximumFileSizeToCacheInBytes,
     modifyURLPrefix: config.modifyURLPrefix,
-    transformParam: mainCompilation,
+    transformParam: compilation,
   });
 
-  mainCompilation.warnings = mainCompilation.warnings.concat(warnings || []);
+  compilation.warnings = compilation.warnings.concat(warnings || []);
 
   // Ensure that the entries are properly sorted by URL.
   const sortedEntries = manifestEntries.sort(

packages/workbox-webpack-plugin/src/lib/get-manifest-entries-from-compilation.js

@@ -11,13 +11,16 @@
 // correct webpack is for this test.
 // See https://jeffy.info/2020/10/01/testing-multiple-webpack-versions.html
 try {
+  delete require.cache[require.resolve('html-webpack-plugin')];
   delete require.cache[require.resolve('webpack')];
 } catch (error) {
-  // Ignore if require.resolve('webpack') fails.
+  // Ignore if require.resolve() fails.
 }
 const upath = require('upath');
-require('module-alias').addAlias(
-    'webpack', upath.resolve('node_modules', 'webpack-v4'));
+const moduleAlias = require('module-alias');
+moduleAlias.addAlias('html-webpack-plugin', upath.resolve('node_modules',
+    'html-webpack-plugin-v4'));
+moduleAlias.addAlias('webpack', upath.resolve('node_modules', 'webpack-v4'));
 
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -477,10 +480,6 @@ describe(`[workbox-webpack-plugin] GenerateSW with webpack v4`, function() {
           await validateServiceWorkerRuntime({swFile, expectedMethodCalls: {
             importScripts: [[/^\.\/workbox-[0-9a-f]{8}$/]],
             precacheAndRoute: [[[{
-              revision: /^[0-9a-f]{32}$/,
-              // See https://github.com/webpack/webpack/issues/11425#issuecomment-692809539
-              url: '__child-HtmlWebpackPlugin_0',
-            }, {
               revision: /^[0-9a-f]{32}$/,
               url: /^entry1-[0-9a-f]{20}\.js$/,
             }, {

test/workbox-webpack-plugin/node/v4/generate-sw.js

@@ -11,13 +11,16 @@
 // correct webpack is for this test.
 // See https://jeffy.info/2020/10/01/testing-multiple-webpack-versions.html
 try {
+  delete require.cache[require.resolve('html-webpack-plugin')];
   delete require.cache[require.resolve('webpack')];
 } catch (error) {
-  // Ignore if require.resolve('webpack') fails.
+  // Ignore if require.resolve() fails.
 }
 const upath = require('upath');
-require('module-alias').addAlias(
-    'webpack', upath.resolve('node_modules', 'webpack-v4'));
+const moduleAlias = require('module-alias');
+moduleAlias.addAlias('html-webpack-plugin', upath.resolve('node_modules',
+    'html-webpack-plugin-v4'));
+moduleAlias.addAlias('webpack', upath.resolve('node_modules', 'webpack-v4'));
 
 const chai = require('chai');
 const chaiMatchPattern = require('chai-match-pattern');
@@ -388,10 +391,6 @@ describe(`[workbox-webpack-plugin] InjectManifest with webpack v4`, function() {
             entryPoint: 'injectManifest',
             expectedMethodCalls: {
               precacheAndRoute: [[[{
-                revision: /^[0-9a-f]{32}$/,
-                // See https://github.com/webpack/webpack/issues/11425#issuecomment-692809539
-                url: '__child-HtmlWebpackPlugin_0',
-              }, {
                 revision: /^[0-9a-f]{32}$/,
                 url: /^entry1-[0-9a-f]{20}\.js$/,
               }, {

test/workbox-webpack-plugin/node/v4/inject-manifest.js

@@ -11,13 +11,16 @@
 // correct webpack is for this test.
 // See https://jeffy.info/2020/10/01/testing-multiple-webpack-versions.html
 try {
+  delete require.cache[require.resolve('html-webpack-plugin')];
   delete require.cache[require.resolve('webpack')];
 } catch (error) {
-  // Ignore if require.resolve('webpack') fails.
+  // Ignore if require.resolve() fails.
 }
 const upath = require('upath');
-require('module-alias').addAlias(
-    'webpack', upath.resolve('node_modules', 'webpack-v5'));
+const moduleAlias = require('module-alias');
+moduleAlias.addAlias('html-webpack-plugin', upath.resolve('node_modules',
+    'html-webpack-plugin-v5'));
+moduleAlias.addAlias('webpack', upath.resolve('node_modules', 'webpack-v5'));
 
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -478,15 +481,14 @@ describe(`[workbox-webpack-plugin] GenerateSW with webpack v5`, function() {
           await validateServiceWorkerRuntime({swFile, expectedMethodCalls: {
             importScripts: [[/^\.\/workbox-[0-9a-f]{8}$/]],
             precacheAndRoute: [[[{
-              revision: /^[0-9a-f]{32}$/,
-              // See https://github.com/webpack/webpack/issues/11425#issuecomment-692809539
-              url: '__child-HtmlWebpackPlugin_0',
-            }, {
               revision: /^[0-9a-f]{32}$/,
               url: /^entry1-[0-9a-f]{20}\.js$/,
             }, {
               revision: /^[0-9a-f]{32}$/,
               url: /^entry2-[0-9a-f]{20}\.js$/,
+            }, {
+              revision: /^[0-9a-f]{32}$/,
+              url: 'index.html',
             }], {}]],
           }});
 

test/workbox-webpack-plugin/node/v5/generate-sw.js

@@ -11,13 +11,16 @@
 // correct webpack is for this test.
 // See https://jeffy.info/2020/10/01/testing-multiple-webpack-versions.html
 try {
+  delete require.cache[require.resolve('html-webpack-plugin')];
   delete require.cache[require.resolve('webpack')];
 } catch (error) {
-  // Ignore if require.resolve('webpack') fails.
+  // Ignore if require.resolve() fails.
 }
 const upath = require('upath');
-require('module-alias').addAlias(
-    'webpack', upath.resolve('node_modules', 'webpack-v5'));
+const moduleAlias = require('module-alias');
+moduleAlias.addAlias('html-webpack-plugin', upath.resolve('node_modules',
+    'html-webpack-plugin-v5'));
+moduleAlias.addAlias('webpack', upath.resolve('node_modules', 'webpack-v5'));
 
 const chai = require('chai');
 const chaiMatchPattern = require('chai-match-pattern');
@@ -390,15 +393,14 @@ describe(`[workbox-webpack-plugin] InjectManifest with webpack v5`, function() {
             entryPoint: 'injectManifest',
             expectedMethodCalls: {
               precacheAndRoute: [[[{
-                revision: /^[0-9a-f]{32}$/,
-                // See https://github.com/webpack/webpack/issues/11425#issuecomment-692809539
-                url: '__child-HtmlWebpackPlugin_0',
-              }, {
                 revision: /^[0-9a-f]{32}$/,
                 url: /^entry1-[0-9a-f]{20}\.js$/,
               }, {
                 revision: /^[0-9a-f]{32}$/,
                 url: /^entry2-[0-9a-f]{20}\.js$/,
+              }, {
+                revision: /^[0-9a-f]{32}$/,
+                url: 'index.html',
               }], {}]],
             },
           });