refactor: remove hmr option in favor Hot Module Replacement

Author: cap-Bernardito

README.md

@@ -297,7 +297,6 @@ module.exports = {
               // you can specify a publicPath here
               // by default it uses publicPath in webpackOptions.output
               publicPath: '../',
-              hmr: process.env.NODE_ENV === 'development', // webpack 4 only
             },
           },
           'css-loader',
@@ -356,32 +355,37 @@ Here is an example to have both HMR in `development` and your styles extracted i
 
 (Loaders options left out for clarity, adapt accordingly to your needs.)
 
+You should not use `HotModuleReplacementPlugin` plugin if you are using a `webpack-dev-server`.
+`webpack-dev-server` enables / disables HMR using `hot` option.
+
 **webpack.config.js**
 
 ```js
+const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const devMode = process.env.NODE_ENV !== 'production';
 
+const plugins = [
+  new MiniCssExtractPlugin({
+    // Options similar to the same options in webpackOptions.output
+    // both options are optional
+    filename: devMode ? '[name].css' : '[name].[hash].css',
+    chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
+  }),
+];
+if (devMode) {
+  // only enable hot in development
+  plugins.push(new webpack.HotModuleReplacementPlugin());
+}
+
 module.exports = {
-  plugins: [
-    new MiniCssExtractPlugin({
-      // Options similar to the same options in webpackOptions.output
-      // both options are optional
-      filename: devMode ? '[name].css' : '[name].[hash].css',
-      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
-    }),
-  ],
+  plugins,
   module: {
     rules: [
       {
         test: /\.(sa|sc|c)ss$/,
         use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-            options: {
-              hmr: process.env.NODE_ENV === 'development', // webpack 4 only
-            },
-          },
+          MiniCssExtractPlugin.loader,
           'css-loader',
           'postcss-loader',
           'sass-loader',
@@ -404,20 +408,30 @@ While we attempt to hmr css-modules. It is not easy to perform when code-splitti
 `reloadAll` is an option that should only be enabled if HMR isn't working correctly.
 The core challenge with css-modules is that when code-split, the chunk ids can and do end up different compared to the filename.
 
+You should not use `HotModuleReplacementPlugin` plugin if you are using a `webpack-dev-server`.
+`webpack-dev-server` enables / disables HMR using `hot` option.
+
 **webpack.config.js**
 
 ```js
+const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
+const plugins = [
+  new MiniCssExtractPlugin({
+    // Options similar to the same options in webpackOptions.output
+    // both options are optional
+    filename: devMode ? '[name].css' : '[name].[hash].css',
+    chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
+  }),
+];
+if (devMode) {
+  // only enable hot in development
+  plugins.push(new webpack.HotModuleReplacementPlugin());
+}
+
 module.exports = {
-  plugins: [
-    new MiniCssExtractPlugin({
-      // Options similar to the same options in webpackOptions.output
-      // both options are optional
-      filename: '[name].css',
-      chunkFilename: '[id].css',
-    }),
-  ],
+  plugins,
   module: {
     rules: [
       {
@@ -426,8 +440,6 @@ module.exports = {
           {
             loader: MiniCssExtractPlugin.loader,
             options: {
-              // only enable hot in development (webpack 4 only)
-              hmr: process.env.NODE_ENV === 'development',
               // if hmr does not work, this is a forceful method.
               reloadAll: true,
             },

src/loader.js

@@ -241,7 +241,7 @@ export function pitch(request) {
 
     let resultSource = `// extracted by ${pluginName}`;
 
-    resultSource += options.hmr
+    resultSource += this.hot
       ? hotLoader(result, { context: this.context, options, locals })
       : result;
 

test/TestCases.test.js

@@ -150,6 +150,43 @@ describe('TestCases', () => {
             `webpack-${webpack.version[0]}`
           );
 
+          if (/^hmr/.test(directory)) {
+            let res = fs
+              .readFileSync(path.resolve(outputDirectoryForCase, 'main.js'))
+              .toString();
+
+            const date = Date.now().toString().slice(0, 6);
+            const dateRegexp = new RegExp(`${date}\\d+`, 'gi');
+
+            res = res.replace(dateRegexp, '');
+
+            if (webpack.version[0] === '4') {
+              const matchAll = res.match(/var hotCurrentHash = "([\d\w].*)"/i);
+              const replacer = new Array(matchAll[1].length);
+
+              res = res.replace(
+                /var hotCurrentHash = "([\d\w].*)"/i,
+                `var hotCurrentHash = "${replacer.fill('x').join('')}"`
+              );
+            } else {
+              const matchAll = res.match(
+                /__webpack_require__\.h = \(\) => "([\d\w].*)"/i
+              );
+
+              const replacer = new Array(matchAll[1].length);
+
+              res = res.replace(
+                /__webpack_require__\.h = \(\) => "([\d\w].*)"/i,
+                `__webpack_require__.h = () => "${replacer.fill('x').join('')}"`
+              );
+            }
+
+            fs.writeFileSync(
+              path.resolve(outputDirectoryForCase, 'main.js'),
+              res
+            );
+          }
+
           if (fs.existsSync(expectedDirectoryByVersion)) {
             compareDirectory(
               outputDirectoryForCase,