feat: add support for webpack 5 publicPath 'auto' and relative favicons

example/basic/webpack.config.js

@@ -10,8 +10,7 @@ module.exports = (env, args) => {
     entry: './src/app.js',
     output: {
       path: resolve(__dirname, 'public'),
-      publicPath: '/',
-      filename: 'app.js'
+      filename: 'app.js',
     },
     plugins: [
       new HtmlWebpackPlugin({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "favicons-webpack-plugin",
-  "version": "5.0.0-alpha.6",
+  "version": "5.0.0-alpha.7",
   "description": "Let webpack generate all your favicons and icons for you",
   "main": "src/index.js",
   "files": [
@@ -53,13 +53,13 @@
     "favicons": "^6.2.0",
     "fs-extra": "^8.1.0",
     "get-folder-size": "2.0.1",
-    "html-webpack-plugin": "^5.0.0-beta.4",
+    "html-webpack-plugin": "^5.0.0-beta.6",
     "image-size": "0.8.3",
     "nyc": "^15.0.0",
     "prettier": "1.19.1",
     "standard-version": "8.0.2",
     "typescript": "3.7.4",
-    "webpack": "^5.13.0",
+    "webpack": "^5.16.0",
     "webpack-cli": "4.3.1",
     "webpack-dev-server": "3.11.1",
     "webpack-merge": "^4.2.2"
@@ -79,7 +79,7 @@
     "favicons": ">= 6.2.0"
   },
   "optionalDependencies": {
-    "html-webpack-plugin": ">=5.0.0 || ^5.0.0-beta.3"
+    "html-webpack-plugin": ">=5.0.0 || ^5.0.0-beta.6"
   },
   "config": {
     "commitizen": {

src/cache.js

@@ -1,11 +1,12 @@
-/// @ts-check
+// / @ts-check
 
 // Import types
 /** @typedef {ReturnType<import("webpack").Compiler['getCache']>} WebpackCacheFacade */
 /** @typedef {import("webpack").Compilation} WebpackCompilation */
-/** @typedef {any} Snapshot */
+/** @typedef {Parameters<WebpackCompilation['fileSystemInfo']['checkSnapshotValid']>[0]} Snapshot */
 
-/** @typedef {{
+/** @typedef {{,
+  publicPath: string,
   tags: string[], 
   assets: Array<{
     name: string, 
@@ -22,7 +23,7 @@ const {
 
 /** @type {WeakMap<any, Promise<Snapshot>>} */
 const snapshots = new WeakMap();
-/** @type {WeakMap<Snapshot, Promise<FaviconsCompilationResult>>} */
+/** @type {WeakMap<Promise<Snapshot>, Promise<FaviconsCompilationResult>>} */
 const faviconCache = new WeakMap();
 
 /**
@@ -61,6 +62,7 @@ function runCached(
       // and try again
       if (!isValid) {
         faviconCache.delete(latestSnapShot);
+
         return runCached(
           faviconOptions,
           context,
@@ -69,24 +71,23 @@ function runCached(
           generator
         );
       }
+
       // If the cache is valid return the result directly from cache
       return cachedFavicons;
     });
   }
 
   // Store a snapshot of the filesystem
   // to find out if the logo was changed
-  snapshots.set(
-    pluginInstance,
-    createSnapshot(
-      {
-        fileDependencies: [logo],
-        contextDependencies: [],
-        missingDependencies: []
-      },
-      compilation
-    )
+  const newSnapShot = createSnapshot(
+    {
+      fileDependencies: [logo],
+      contextDependencies: [],
+      missingDependencies: []
+    },
+    compilation
   );
+  snapshots.set(pluginInstance, newSnapShot);
 
   // Start generating the favicons
   const faviconsGenerationsPromise = runWithFileCache(
@@ -97,10 +98,7 @@ function runCached(
   );
 
   // Store the promise of the favicon compilation in cache
-  faviconCache.set(
-    snapshots.get(pluginInstance) || latestSnapShot,
-    faviconsGenerationsPromise
-  );
+  faviconCache.set(newSnapShot, faviconsGenerationsPromise);
 
   return faviconsGenerationsPromise;
 }
@@ -120,8 +118,8 @@ function createSnapshot(fileDependencies, mainCompilation) {
       fileDependencies.missingDependencies,
       {},
       (err, snapshot) => {
-        if (err) {
-          return reject(err);
+        if (err || !snapshot) {
+          return reject(err || new Error('Could not create Snapshot'));
         }
         resolve(snapshot);
       }
@@ -165,7 +163,10 @@ async function runWithFileCache(
     )
   );
 
-  const compilationOutputPath = compilation.outputOptions.path || '';
+  const compilationOutputPath =
+    compilation.outputOptions.path === 'auto'
+      ? ''
+      : compilation.outputOptions.path || '';
   /**
    * the relative output path to the folder where the favicon files should be generated to
    * it might include tokens like [fullhash] or [contenthash]
@@ -184,16 +185,19 @@ async function runWithFileCache(
       relativeOutputPath,
       logoContentHash
     );
+    const webpackPublicPath =
+      compilation.outputOptions.publicPath === 'auto'
+        ? ''
+        : compilation.outputOptions.publicPath;
     const resolvedPublicPath = replaceContentHash(
       compilation,
       resolvePublicPath(
         compilation,
-        faviconOptions.publicPath || compilation.outputOptions.publicPath,
+        faviconOptions.publicPath || webpackPublicPath,
         faviconOptions.prefix
       ),
       logoContentHash
     );
-
     return generator(logoSource, compilation, resolvedPublicPath, outputPath);
   };
 
@@ -211,6 +215,7 @@ async function runWithFileCache(
     // Recompile filesystem cache if the logo source changes:
     logoContentHash
   ].join('\n');
+
   // Use the webpack cache which supports filesystem caching to improve build speed
   // See also https://webpack.js.org/configuration/other-options/#cache
   // Create one cache for every output target

src/hash.js

@@ -1,4 +1,4 @@
-/// @ts-check
+// / @ts-check
 
 // Import types
 /** @typedef {import("webpack").Compilation} WebpackCompilation */
@@ -16,16 +16,14 @@ const url = require('url');
 function resolvePublicPath(compilation, publicPath, assetPath) {
   const publicPathString =
     publicPath && typeof publicPath === 'function'
-      ? compilation.getAssetPath(
-          compilation.outputOptions.publicPath || 'auto',
-          { hash: compilation.hash }
-        )
+      ? compilation.getAssetPath(publicPath, { hash: compilation.hash })
       : publicPath;
 
   const fullAssetPath = url.resolve(
-    appendSlash(publicPathString || 'auto'),
+    appendSlash(publicPathString || ''),
     assetPath
   );
+
   return fullAssetPath;
 }
 
@@ -52,7 +50,7 @@ function replaceContentHash(compilation, assetPath, hash) {
  * @param {string} url
  */
 function appendSlash(url) {
-  return url && url.length && url.substr(-1, 1) !== '/' ? url + '/' : url;
+  return url && url.length && url.substr(-1, 1) !== '/' ? `${url}/` : url;
 }
 
 /**