feat: add option to enable/disable HMR (options.hmr)

Author: drawyan

README.md

@@ -134,6 +134,7 @@ Styles are not added on `import/require()`, but instead on call to `use`/`ref`.
 
 |Name|Type|Default|Description|
 |:--:|:--:|:-----:|:----------|
+|**`hmr || hot`**|`{Boolean}`|`true`|Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added (good for non local development/distribution)|
 |**`base`** |`{Number}`|`true`|Set module ID base (DLLPlugin)|
 |**`attrs`**|`{Object}`|`{}`|Add custom attrs to `<style></style>`|
 |**`transform`** |`{Function}`|`false`|Transform/Conditionally load CSS by passing a transform/condition function|
@@ -142,6 +143,28 @@ Styles are not added on `import/require()`, but instead on call to `use`/`ref`.
 |**`sourceMap`**|`{Boolean}`|`false`|Enable/Disable Sourcemaps|
 |**`convertToAbsoluteUrls`**|`{Boolean}`|`false`|Converts relative URLs to absolute urls, when source maps are enabled|
 
+### `hmr || hot`
+
+Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added.
+This could be used for non local development and distribution.
+
+**webpack.config.js**
+```js
+{
+  loader: 'style-loader'
+  options: {
+    hmr: false
+  }
+}
+
+{
+  loader: 'style-loader'
+  options: {
+    hot: true
+  }
+}
+```
+
 ### `base`
 
 This setting is primarily used as a workaround for [css clashes](https://github.com/webpack-contrib/style-loader/issues/163) when using one or more [DllPlugin](https://robertknight.github.io/posts/webpack-dll-plugins/)'s.  `base` allows you to prevent either the *app*'s css (or *DllPlugin2*'s css) from overwriting *DllPlugin1*'s css by specifying a css module id base which is greater than the range used by *DllPlugin1* e.g.:

index.js

@@ -17,6 +17,24 @@ module.exports.pitch = function (request) {
 
 	validateOptions(require('./options.json'), options, 'Style Loader')
 
+	options.hot = typeof options.hmr === 'undefined' ? options.hot : options.hmr;
+
+	var hmrBlock = [
+		"// Hot Module Replacement",
+		"if(module.hot) {",
+		"	// When the styles change, update the <style> tags",
+		"	if(!content.locals) {",
+		"		module.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + request) + ", function() {",
+		"			var newContent = require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ");",
+		"			if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];",
+		"			update(newContent);",
+		"		});",
+		"	}",
+		"	// When the module is disposed, remove the <style> tags",
+		"	module.hot.dispose(function() { update(); });",
+		"}"
+	].join("\n");
+
 	return [
 		"// style-loader: Adds some css to the DOM by adding a <style> tag",
 		"",
@@ -31,18 +49,6 @@ module.exports.pitch = function (request) {
 		"// add the styles to the DOM",
 		"var update = require(" + loaderUtils.stringifyRequest(this, "!" + path.join(__dirname, "lib", "addStyles.js")) + ")(content, options);",
 		"if(content.locals) module.exports = content.locals;",
-		"// Hot Module Replacement",
-		"if(module.hot) {",
-		"	// When the styles change, update the <style> tags",
-		"	if(!content.locals) {",
-		"		module.hot.accept(" + loaderUtils.stringifyRequest(this, "!!" + request) + ", function() {",
-		"			var newContent = require(" + loaderUtils.stringifyRequest(this, "!!" + request) + ");",
-		"			if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];",
-		"			update(newContent);",
-		"		});",
-		"	}",
-		"	// When the module is disposed, remove the <style> tags",
-		"	module.hot.dispose(function() { update(); });",
-		"}"
+		options.hot ? hmrBlock : ""
 	].join("\n");
 };

options.json

@@ -2,6 +2,13 @@
 {
   "type": "object",
   "properties": {
+    "hmr": {
+      "type": "boolean"
+    },
+    "hot": {
+      "type": "boolean",
+      "default": true
+    },
     "base": {
       "type": "number"
     },

test/basicTest.js

@@ -5,7 +5,8 @@ describe("basic tests", function() {
   var path = require("path");
 
   var utils = require("./utils"),
-    runCompilerTest = utils.runCompilerTest;
+    runCompilerTest = utils.runCompilerTest,
+    runSourceTest = utils.runSourceTest;
 
   var fs;
 
@@ -60,6 +61,18 @@ describe("basic tests", function() {
     }
   };
 
+  var setupWebpackConfig = function() {
+    fs = utils.setup(webpackConfig, jsdomHtml);
+
+    // Create a tiny file system. rootDir is used because loaders are referring to absolute paths.
+    fs.mkdirpSync(rootDir);
+    fs.writeFileSync(rootDir + "main.js", "var css = require('./style.css');");
+    fs.writeFileSync(rootDir + "style.css", requiredCss);
+    fs.writeFileSync(rootDir + "styleTwo.css", requiredCssTwo);
+    fs.writeFileSync(rootDir + "localScoped.css", localScopedCss);
+    fs.writeFileSync(rootDir + "localComposing.css", localComposingCss);
+  };
+
   beforeEach(function() {
     // Reset all style-loader options
     for (var member in styleLoaderOptions) {
@@ -70,15 +83,7 @@ describe("basic tests", function() {
       cssRule[member] = defaultCssRule[member];
     }
 
-    fs = utils.setup(webpackConfig, jsdomHtml);
-
-    // Create a tiny file system. rootDir is used because loaders are refering to absolute paths.
-    fs.mkdirpSync(rootDir);
-    fs.writeFileSync(rootDir + "main.js", "var css = require('./style.css');");
-    fs.writeFileSync(rootDir + "style.css", requiredCss);
-    fs.writeFileSync(rootDir + "styleTwo.css", requiredCssTwo);
-    fs.writeFileSync(rootDir + "localScoped.css", localScopedCss);
-    fs.writeFileSync(rootDir + "localComposing.css", localComposingCss);
+    setupWebpackConfig();
   }); // before each
 
   it("insert at bottom", function(done) {
@@ -385,6 +390,37 @@ describe("basic tests", function() {
 
       runCompilerTest(expected, done);
     });
+  });
+
+  describe("hmr and hot options", function() {
+
+    it("should output HMR code block by default", function(done) {
+      runSourceTest(/Hot Module Replacement/g, null, done);
+    });
+
+    it("should output HMR code block when options.hmr is true", function(done) {
+      styleLoaderOptions.hmr = true;
+      setupWebpackConfig();
+      runSourceTest(/Hot Module Replacement/g, null, done);
+    });
+
+    it("should not output HMR code block when options.hmr is false", function(done) {
+      styleLoaderOptions.hmr = false;
+      setupWebpackConfig();
+      runSourceTest(null, /Hot Module Replacement/g, done);
+    });
+
+    it("should output HMR code block when options.hot is true", function(done) {
+      styleLoaderOptions.hot = true;
+      setupWebpackConfig();
+      runSourceTest(/Hot Module Replacement/g, null, done);
+    });
+
+    it("should not output HMR code block when options.hot is false", function(done) {
+      styleLoaderOptions.hot = false;
+      setupWebpackConfig();
+      runSourceTest(null, /Hot Module Replacement/g, done);
+    });
 
   });
 

test/utils.js

@@ -72,7 +72,7 @@ module.exports = {
         virtualConsole: jsdom.createVirtualConsole().sendTo(console),
         done: function(err, window) {
           if (typeof actual === 'function') {
-            assert.equal(actual.apply(window), expected);  
+            assert.equal(actual.apply(window), expected);
           } else {
             assert.equal(window.document.querySelector(selector).innerHTML.trim(), expected);
           }
@@ -83,5 +83,30 @@ module.exports = {
         }
       });
     });
+  },
+
+  /*
+   * Runs the test against Webpack compiled source code.
+   *  @param {regex} regexToMatch - regex to match the source code
+   *  @param {regex} regexToNotMatch - regex to NOT match the source code
+   *  @param {function} done - Async callback from Mocha.
+   */
+  runSourceTest: function(regexToMatch, regexToNotMatch, done) {
+    compiler.run(function(err, stats) {
+      if (stats.compilation.errors.length) {
+        throw new Error(stats.compilation.errors);
+      }
+
+      const bundleJs = stats.compilation.assets["bundle.js"].source();
+      if (regexToMatch) {
+        assert.equal(regexToMatch.test(bundleJs), true);
+      }
+
+      if (regexToNotMatch) {
+        assert.equal(regexToNotMatch.test(bundleJs), false);
+      }
+
+      done();
+    });
   }
 };