fix: hmr dev server log levels

Author: CreativeTechGuy

src/hmr/hotModuleReplacement.js

@@ -11,6 +11,17 @@ const srcByModuleId = Object.create(null);
 
 const noDocument = typeof document === "undefined";
 
+const logLevels = {
+  none: 6,
+  false: 6,
+  error: 5,
+  warn: 4,
+  info: 3,
+  log: 2,
+  true: 2,
+  verbose: 1,
+};
+
 const { forEach } = Array.prototype;
 
 function debounce(fn, time) {
@@ -207,8 +218,12 @@ function isUrlRequest(url) {
 }
 
 module.exports = function (moduleId, options) {
+  const logLevel = logLevels[options.logLevel] || logLevels.info;
+
   if (noDocument) {
-    console.log("no window.document found, will not HMR CSS");
+    if (logLevel <= logLevels.warn) {
+      console.warn("no window.document found, will not HMR CSS");
+    }
 
     return noop;
   }
@@ -220,17 +235,23 @@ module.exports = function (moduleId, options) {
     const reloaded = reloadStyle(src);
 
     if (options.locals) {
-      console.log("[HMR] Detected local css modules. Reload all css");
+      if (logLevel <= logLevels.info) {
+        console.log("[HMR] Detected local css modules. Reload all css");
+      }
 
       reloadAll();
 
       return;
     }
 
     if (reloaded) {
-      console.log("[HMR] css reload %s", src.join(" "));
+      if (logLevel <= logLevels.info) {
+        console.log("[HMR] css reload %s", src.join(" "));
+      }
     } else {
-      console.log("[HMR] Reload all css");
+      if (logLevel <= logLevels.info) {
+        console.log("[HMR] Reload all css");
+      }
 
       reloadAll();
     }

src/loader.js

@@ -26,6 +26,7 @@ function hotLoader(content, context) {
       )})(module.id, ${JSON.stringify({
     ...context.options,
     locals: !!context.locals,
+    logLevel: context.logLevel,
   })});
       module.hot.dispose(cssReload);
       ${accept}
@@ -165,8 +166,10 @@ export function pitch(request) {
 
     let resultSource = `// extracted by ${pluginName}`;
 
+    const logLevel = this._compilation.options.devServer?.client?.logging;
+
     resultSource += this.hot
-      ? hotLoader(result, { context: this.context, options, locals })
+      ? hotLoader(result, { context: this.context, options, locals, logLevel })
       : result;
 
     return callback(null, resultSource);