Enable hot module replacement in the AMiniCssExtractPluginLoader config

LiskHQ · Jan 16, 2020 · 5eab9b0 · 5eab9b0
1 parent 3240e38
commit 5eab9b0
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/config/webpack.config.react.js b/config/webpack.config.react.js
@@ -53,6 +53,16 @@ const headCssLoader = {
 };
 // const headCssLoadersConfig = { ...headCssLoader };
 
+const MiniCssExtractPluginLoader = {
+  loader: MiniCssExtractPlugin.loader,
+  options: {
+    // only enable hot in development
+    hmr: process.env.DEBUG,
+    // if hmr does not work, this is a forceful method.
+    reloadAll: false,
+  },
+};
+
 const reactToastifyLoader = {
   loader: 'css-loader',
   options: {
@@ -152,16 +162,15 @@ module.exports = {
     rules: [
       {
         test: /styles\.head\.css$/,
-        use: [MiniCssExtractPlugin.loader, headCssLoader],
+        use: [MiniCssExtractPluginLoader, headCssLoader],
       },
       {
         test: /ReactToastify\.css$/,
-        use: [MiniCssExtractPlugin.loader, reactToastifyLoader, postCssLoader],
+        use: [MiniCssExtractPluginLoader, reactToastifyLoader, postCssLoader],
       },
       {
         test: /^((?!(styles\.head|ReactToastify)).)*\.css$/,
-
-        use: [MiniCssExtractPlugin.loader, cssLoader, postCssLoader],
+        use: [MiniCssExtractPluginLoader, cssLoader, postCssLoader],
       },
     ],
   },