refactor: remove hmr option in favor Hot Module Replacement

Author: cap-Bernardito

README.md

@@ -218,7 +218,6 @@ module.exports = {
               // you can specify a publicPath here
               // by default it uses publicPath in webpackOptions.output
               publicPath: '../',
-              hmr: process.env.NODE_ENV === 'development',
             },
           },
           'css-loader',
@@ -280,29 +279,32 @@ Here is an example to have both HMR in `development` and your styles extracted i
 **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: plugins,
   module: {
     rules: [
       {
         test: /\.(sa|sc|c)ss$/,
         use: [
-          {
-            loader: MiniCssExtractPlugin.loader,
-            options: {
-              hmr: process.env.NODE_ENV === 'development',
-            },
-          },
+          MiniCssExtractPlugin.loader,
           'css-loader',
           'postcss-loader',
           'sass-loader',
@@ -323,20 +325,32 @@ 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 this 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: '[name].css',
-      chunkFilename: '[id].css',
-    }),
-  ],
+  plugins: plugins,
   module: {
     rules: [
       {
@@ -345,8 +359,6 @@ module.exports = {
           {
             loader: MiniCssExtractPlugin.loader,
             options: {
-              // only enable hot in development
-              hmr: process.env.NODE_ENV === 'development',
               // if hmr does not work, this is a forceful method.
               reloadAll: true,
             },

src/loader-options.json

@@ -15,9 +15,6 @@
     "esModule": {
       "type": "boolean"
     },
-    "hmr": {
-      "type": "boolean"
-    },
     "reloadAll": {
       "type": "boolean"
     }

src/loader.js

@@ -218,7 +218,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

@@ -95,6 +95,40 @@ describe('TestCases', () => {
             `webpack-${webpack.version[0]}`
           );
 
+          if (/^hmr/.test(directory)) {
+            let res = fs
+              .readFileSync(path.resolve(outputDirectoryForCase, 'main.js'))
+              .toString();
+
+            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('')}"`
+              );
+            }
+
+            res = res.replace(/\/\/ \d*\n/gim, '// replased\n');
+
+            fs.writeFileSync(
+              path.resolve(outputDirectoryForCase, 'main.js'),
+              res
+            );
+          }
+
           if (fs.existsSync(expectedDirectoryByVersion)) {
             compareDirectory(
               outputDirectoryForCase,

test/__snapshots__/validate-loader-options.test.js.snap

@@ -5,11 +5,6 @@ exports[`validate options should throw an error on the "esModule" option with "1
  - options.esModule should be a boolean."
 `;
 
-exports[`validate options should throw an error on the "hmr" option with "1" value 1`] = `
-"Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
- - options.hmr should be a boolean."
-`;
-
 exports[`validate options should throw an error on the "publicPath" option with "true" value 1`] = `
 "Invalid options object. Mini CSS Extract Plugin Loader has been initialized using an options object that does not match the API schema.
  - options.publicPath should be one of these: