feat(src/index.js): Check for hot reloading before adding hot reload loaders

Before adding hot reloading to the loader stack, make sure the build has some reference to hot
reloading either in the entry-points or devServer

Author: ScriptedAlchemy

src/index.js

@@ -4,7 +4,7 @@ import path from 'path';
 import webpack from 'webpack';
 import sources from 'webpack-sources';
 
-const thing = path.resolve(__dirname, './hotLoader.js');
+const hotLoader = path.resolve(__dirname, './hotLoader.js');
 
 const { ConcatSource, SourceMapSource, OriginalSource } = sources;
 const { Template, util: { createHash } } = webpack;
@@ -17,6 +17,20 @@ const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/i;
 const REGEXP_CONTENTHASH = /\[contenthash(?::(\d+))?\]/i;
 const REGEXP_NAME = /\[name\]/i;
 
+const isHMR = (compiler) => {
+  if (compiler && compiler.options) {
+    if (compiler.options.devServer && compiler.options.devServer.hot) {
+      return true;
+    }
+
+    if (compiler.options.entry) {
+      const entryString = JSON.stringify(compiler.options.entry);
+      return entryString.includes('hot') || entryString.includes('hmr');
+    }
+  }
+  return false;
+};
+
 class CssDependency extends webpack.Dependency {
   constructor(
     { identifier, content, media, sourceMap },
@@ -132,24 +146,31 @@ class ExtractCssChunks {
   }
 
   apply(compiler) {
-      console.log('DevServerHot:', compiler.options.devServer.hot)
-// console.log(compiler.options)
-    const updatedRules = compiler.options.module.rules.reduce((rules, rule) => {
-      if (rule.use && Array.isArray(rule.use)) {
-        const isMiniCss = rule.use.some((l) => {
-          const needle = l.loader || l;
-          return needle.includes(pluginName);
-        });
-        if (isMiniCss) {
-          rule.use.unshift(thing);
-        }
-      }
-      rules.push(rule);
+    try {
+      const isHOT = isHMR(compiler);
 
-      return rules;
-    }, []);
+      if (isHOT && compiler.options.module && compiler.options.module.rules) {
+        const updatedRules = compiler.options.module.rules.reduce((rules, rule) => {
+          if (rule.use && Array.isArray(rule.use)) {
+            const isMiniCss = rule.use.some((l) => {
+              const needle = l.loader || l;
+              return needle.includes(pluginName);
+            });
+            if (isMiniCss) {
+              rule.use.unshift(hotLoader);
+            }
+          }
+          rules.push(rule);
+
+          return rules;
+        }, []);
+
+        compiler.options.module.rules = updatedRules;
+      }
+    } catch (e) {
+      console.error('Something went wrong: contact the author', e);
+    }
 
-    compiler.options.module.rules = updatedRules;
 
     compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
       compilation.hooks.normalModuleLoader.tap(pluginName, (lc, m) => {