fix: track the base manifest file only if specified

README.md

@@ -68,8 +68,6 @@ which defaults to `modules: ["node_modules"]`.
 
 In combination with [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) it will also inject the necessary html for you:
 
-> **Note**: `html-webpack-plugin` _must_ come before `favicons-webpack-plugin` in the plugins array.
-
 ```html
 <link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-touch-icon-57x57.png">
 <link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-touch-icon-60x60.png">
@@ -169,7 +167,7 @@ const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
 plugins: [
   new FaviconsWebpackPlugin({
     logo: './src/logo.png', // svg works too!
-    mode: 'webapp', // optional can be 'webapp' or 'light' - 'webapp' by default
+    mode: 'webapp', // optional can be 'webapp', 'light' or 'auto' - 'auto' by default
     devMode: 'webapp', // optional can be 'webapp' or 'light' - 'light' by default 
     favicons: {
       appName: 'my-app',
@@ -220,11 +218,11 @@ plugins: [
 
 Modes allow you to choose a very fast simplified favicon compilation or a production ready favicon compilation
 
-By default this mode is controlled by webpack  
-If the webpack mode is set to `development` the favicons mode will use `light`.  
-If the webpack mode is set to `production` the favicons mode will use `webapp`.
+By default or if the favicons mode option is set to `auto` the favicon compilation depends on the webpack mode:  
+If the webpack mode is set to `development` the favicons mode will use a quick `light` favicons build.  
+If the webpack mode is set to `production` the favicons mode will use a full `webapp` favicons build.
 
-This behaviour can be adjusted by setting the favicon `mode` and `devMode` options.
+This behaviour can be adjusted by setting the favicons `mode` and `devMode` options.
 
 ### Custom manifests
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "favicons-webpack-plugin",
-  "version": "5.0.0-alpha.9",
+  "version": "5.0.0-alpha.10",
   "description": "Let webpack generate all your favicons and icons for you",
   "main": "src/index.js",
   "files": [

src/cache.js

@@ -7,6 +7,7 @@
 
 const path = require('path');
 const { getContentHash } = require('./hash');
+const { webpackLogger } = require('./logger');
 
 /** @type {WeakMap<any, Promise<Snapshot>>} */
 const snapshots = new WeakMap();
@@ -38,6 +39,7 @@ function runCached(
   idGenerator,
   generator
 ) {
+  const logger = webpackLogger(compilation);
   const latestSnapShot = snapshots.get(pluginInstance);
   /** @type {Promise<TResult> | undefined} */
   const cachedFavicons = latestSnapShot && faviconCache.get(latestSnapShot);
@@ -69,13 +71,14 @@ function runCached(
   // to find out if the logo was changed
   const newSnapShot = createSnapshot(
     {
-      fileDependencies: files,
+      fileDependencies: files.filter(Boolean),
       contextDependencies: [],
       missingDependencies: []
     },
     compilation
   );
   snapshots.set(pluginInstance, newSnapShot);
+
   // Start generating the favicons
   const faviconsGenerationsPromise = useWebpackCache
     ? runWithFileCache(files, compilation, idGenerator, eTags, generator)

src/hash.js

@@ -10,7 +10,7 @@ const url = require('url');
  * Replaces [contenthash] and [fullhash] inside the given publicPath and assetPath
  *
  * @param {WebpackCompilation} compilation
- * @param {undefined | string | Function} publicPath
+ * @param {undefined | string | ((...args:any[]) => string)} publicPath
  * @param {string} assetPath
  */
 function resolvePublicPath(compilation, publicPath, assetPath) {

src/index.js

@@ -7,6 +7,7 @@ const { runCached } = require('./cache');
 const Oracle = require('./oracle');
 const url = require('url');
 const { resolvePublicPath, replaceContentHash } = require('./hash');
+const { webpackLogger } = require('./logger');
 
 /** @type {WeakMap<any, Promise<{tags: string[], assets: Array<{name: string, contents: import('webpack').sources.RawSource}>}>>} */
 const faviconCompilations = new WeakMap();
@@ -116,6 +117,11 @@ class FaviconsWebpackPlugin {
         // Watch for changes to the logo
         compilation.fileDependencies.add(this.options.logo);
 
+        // Watch for changes to the base manifest.json
+        if (typeof this.options.manifest === 'string') {
+          compilation.fileDependencies.add(this.options.manifest);
+        }
+
         // Hook into the html-webpack-plugin processing and add the html
         const HtmlWebpackPlugin = compiler.options.plugins
           .map(({ constructor }) => constructor)
@@ -275,8 +281,8 @@ class FaviconsWebpackPlugin {
     switch (this.getCurrentCompilationMode(compilation.compiler)) {
       case 'light':
         if (!this.options.mode) {
-          compilation.logger.info(
-            'favicons-webpack-plugin - generate only a single favicon for fast compilation time in development mode. This behaviour can be changed by setting the favicon mode option.'
+          webpackLogger(compilation).info(
+            'generate only a single favicon for fast compilation time in development mode. This behaviour can be changed by setting the favicon mode option.'
           );
         }
 
@@ -288,6 +294,8 @@ class FaviconsWebpackPlugin {
         );
       case 'webapp':
       default:
+        webpackLogger(compilation).log('generate favicons');
+
         return this.generateFaviconsWebapp(
           logo.content,
           manifest ? JSON.parse(manifest.toString()) : this.options.manifest,
@@ -392,9 +400,11 @@ class FaviconsWebpackPlugin {
     // Read the current `mode` and `devMode` option
     const faviconDefaultMode = isProductionLikeMode ? 'webapp' : 'light';
 
+    const mode = this.options.mode === 'auto' ? undefined : this.options.mode;
+
     return isProductionLikeMode
-      ? this.options.mode || faviconDefaultMode
-      : this.options.devMode || this.options.mode || faviconDefaultMode;
+      ? mode || faviconDefaultMode
+      : this.options.devMode || mode || faviconDefaultMode;
   }
 }
 

src/logger.js

@@ -0,0 +1,17 @@
+// @ts-check
+
+// Import types
+/** @typedef {ReturnType<import("webpack").Compiler['getCache']>} WebpackCacheFacade */
+/** @typedef {import("webpack").Compilation} WebpackCompilation */
+/** @typedef {Parameters<WebpackCompilation['fileSystemInfo']['checkSnapshotValid']>[0]} Snapshot */
+
+/**
+ * Returns the favicon webpack logger instance
+ * @see https://webpack.js.org/api/logging/
+ *
+ * @param {WebpackCompilation} compilation
+ */
+const webpackLogger = compilation =>
+  compilation.compiler.getInfrastructureLogger('favicons-webpack-plugin');
+
+module.exports = { webpackLogger };

src/options.d.ts

@@ -35,7 +35,7 @@ export interface FaviconWebpackPlugionOptions {
    *     this mode has a quite slow compilation but wide browser support
    *     by default this mode is used for production
    */
-  mode?: 'light' | 'webapp',
+  mode?: 'light' | 'webapp' | 'auto',
   /**
    * Favicon generation modes used during development  
    * - `light`