From 956ad1986c2d089a2192bcc7b0cce10bf1af9c56 Mon Sep 17 00:00:00 2001
From: Mahesh Subramanian <maheshpec123@gmail.com>
Date: Sat, 29 Jul 2017 17:43:41 -0700
Subject: [PATCH 1/4] docs(guides): fix HMR Gotcha section snippet (#1463)

---
 content/guides/hot-module-replacement.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/content/guides/hot-module-replacement.md b/content/guides/hot-module-replacement.md
index 38b7b327a1c2..293abed421f5 100644
--- a/content/guides/hot-module-replacement.md
+++ b/content/guides/hot-module-replacement.md
@@ -147,7 +147,7 @@ __print.js__
     })
   }
 
-  let element = component();
++  let element = component();
 
   function component() {
     var element = document.createElement('div');
@@ -163,7 +163,8 @@ __print.js__
     return element;
   }
 
-  document.body.appendChild(element);
+-  document.body.appendChild(component());
++  document.body.appendChild(element);
 ```
 
 This is just one example, but there are many others that can easily trip people up. Luckily, there are a lot of loaders out there (some of which are mentioned below) that will make hot module replacement much easier.
@@ -173,7 +174,7 @@ This is just one example, but there are many others that can easily trip people
 
 Hot Module Replacement with CSS is actually fairly straightforward with the help of the `style-loader`. This loader uses `module.hot.accept` behind the scenes to patch `<style>` tags when CSS dependencies are updated.
 
-First let's install both loaders with the following command: 
+First let's install both loaders with the following command:
 
 ```bash
 npm install --save-dev style-loader css-loader

From 762c244ad36fce8d007727e50f4a5425989a4abb Mon Sep 17 00:00:00 2001
From: Mahesh Subramanian <maheshpec123@gmail.com>
Date: Sun, 30 Jul 2017 23:07:46 -0700
Subject: [PATCH 2/4] docs(guides): Remove chunk and reorganize snippet in HMR
 module

---
 content/guides/hot-module-replacement.md | 77 ++++++++++++------------
 1 file changed, 40 insertions(+), 37 deletions(-)

diff --git a/content/guides/hot-module-replacement.md b/content/guides/hot-module-replacement.md
index 293abed421f5..cf0f8517c33c 100644
--- a/content/guides/hot-module-replacement.md
+++ b/content/guides/hot-module-replacement.md
@@ -30,6 +30,8 @@ W> __HMR__ is not intended for use in production, meaning it should only be used
 
 This feature is great for productivity. All we need to do is update our [webpack-dev-server](https://github.com/webpack/webpack-dev-server) configuration, and use webpack's built in HMR plugin.
 
+W> You cannot update the entry point for a chunk. It will not be accepted.
+
 __webpack.config.js__
 
 ``` diff
@@ -39,8 +41,9 @@ __webpack.config.js__
 
   module.exports = {
     entry: {
-      app: './src/index.js',
-      print: './src/print.js'
+-      app: './src/index.js',
+-      print: './src/print.js'
++      app: './src/index.js'
     },
     devtool: 'inline-source-map',
     devServer: {
@@ -72,13 +75,6 @@ __index.js__
   import _ from 'lodash';
   import printMe from './print.js';
 
-+ if (module.hot) {
-+   module.hot.accept('./print.js', function() {
-+     console.log('Accepting the updated printMe module!');
-+     printMe();
-+   })
-+ }
-
   function component() {
     var element = document.createElement('div');
     var btn = document.createElement('button');
@@ -94,6 +90,14 @@ __index.js__
   }
 
   document.body.appendChild(component());
++
++ if (module.hot) {
++   module.hot.accept('./print.js', function() {
++     console.log('Accepting the updated printMe module!');
++     printMe();
++   })
++ }
+
 ```
 
 Start changing the `console.log` statement in `print.js`, and you should see the following output in the browser console.
@@ -131,24 +135,12 @@ This is happening because the button's `onclick` event handler is still bound to
 
 To make this work with HMR we need to update that binding to the new `printMe` function using `module.hot.accept`:
 
-__print.js__
+__index.js__
 
 ``` diff
   import _ from 'lodash';
   import printMe from './print.js';
 
-  if (module.hot) {
-    module.hot.accept('./print.js', function() {
-      console.log('Accepting the updated printMe module!');
--     printMe();
-+     document.body.removeChild(element);
-+     element = component(); // Re-render the "component" to update the click handler
-+     document.body.appendChild(element);
-    })
-  }
-
-+  let element = component();
-
   function component() {
     var element = document.createElement('div');
     var btn = document.createElement('button');
@@ -163,8 +155,20 @@ __print.js__
     return element;
   }
 
--  document.body.appendChild(component());
-+  document.body.appendChild(element);
+- document.body.appendChild(component());
++ let element = component(); //Store the element to re-render on print.js changes
++ document.body.appendChild(element);
+
+  if (module.hot) {
+    module.hot.accept('./print.js', function() {
+      console.log('Accepting the updated printMe module!');
+-     printMe();
++     document.body.removeChild(element);
++     element = component(); // Re-render the "component" to update the click handler
++     document.body.appendChild(element);
+    })
+  }
+
 ```
 
 This is just one example, but there are many others that can easily trip people up. Luckily, there are a lot of loaders out there (some of which are mentioned below) that will make hot module replacement much easier.
@@ -191,8 +195,7 @@ __webpack.config.js__
 
   module.exports = {
     entry: {
-      app: './src/index.js',
-      print: './src/print.js'
+      app: './src/index.js'
     },
     devtool: 'inline-source-map',
     devServer: {
@@ -251,17 +254,6 @@ __index.js__
   import printMe from './print.js';
 + import './styles.css';
 
-  if (module.hot) {
-    module.hot.accept('./print.js', function() {
-      console.log('Accepting the updated printMe module!');
-      document.body.removeChild(element);
-      element = component(); // Re-render the "component" to update the click handler
-      document.body.appendChild(element);
-    })
-  }
-
-  let element = component();
-
   function component() {
     var element = document.createElement('div');
     var btn = document.createElement('button');
@@ -276,7 +268,18 @@ __index.js__
     return element;
   }
 
+  let element = component();
   document.body.appendChild(element);
+
+  if (module.hot) {
+    module.hot.accept('./print.js', function() {
+      console.log('Accepting the updated printMe module!');
+     document.body.removeChild(element);
+     element = component(); // Re-render the "component" to update the click handler
+     document.body.appendChild(element);
+    })
+  }
+
 ```
 
 Change the style on `body` to `background: red;` and you should immediately see the page's background color change without a full refresh.

From a1ab1c940230728098043b73fb58a00eec8bdf90 Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Mon, 31 Jul 2017 18:40:46 -0400
Subject: [PATCH 3/4] docs(guides): minor tweaks to hot-module-replacement
 guide

---
 content/guides/hot-module-replacement.md | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/content/guides/hot-module-replacement.md b/content/guides/hot-module-replacement.md
index cf0f8517c33c..69775372f4cf 100644
--- a/content/guides/hot-module-replacement.md
+++ b/content/guides/hot-module-replacement.md
@@ -28,9 +28,7 @@ W> __HMR__ is not intended for use in production, meaning it should only be used
 
 ## Enabling HMR
 
-This feature is great for productivity. All we need to do is update our [webpack-dev-server](https://github.com/webpack/webpack-dev-server) configuration, and use webpack's built in HMR plugin.
-
-W> You cannot update the entry point for a chunk. It will not be accepted.
+This feature is great for productivity. All we need to do is update our [webpack-dev-server](https://github.com/webpack/webpack-dev-server) configuration, and use webpack's built in HMR plugin. We'll also remove the entry point for `print.js` as it will now be consumed by the `index.js` module.
 
 __webpack.config.js__
 
@@ -97,7 +95,6 @@ __index.js__
 +     printMe();
 +   })
 + }
-
 ```
 
 Start changing the `console.log` statement in `print.js`, and you should see the following output in the browser console.
@@ -156,7 +153,7 @@ __index.js__
   }
 
 - document.body.appendChild(component());
-+ let element = component(); //Store the element to re-render on print.js changes
++ let element = component(); // Store the element to re-render on print.js changes
 + document.body.appendChild(element);
 
   if (module.hot) {
@@ -168,7 +165,6 @@ __index.js__
 +     document.body.appendChild(element);
     })
   }
-
 ```
 
 This is just one example, but there are many others that can easily trip people up. Luckily, there are a lot of loaders out there (some of which are mentioned below) that will make hot module replacement much easier.

From 91babdbfeb0a0af3f2911000a44ae8eaeab2b6e3 Mon Sep 17 00:00:00 2001
From: Greg Venech <greg.venech@gmail.com>
Date: Mon, 31 Jul 2017 18:42:02 -0400
Subject: [PATCH 4/4] docs(guides): minor spacing fix

---
 content/guides/hot-module-replacement.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/guides/hot-module-replacement.md b/content/guides/hot-module-replacement.md
index 69775372f4cf..208a7093d9ac 100644
--- a/content/guides/hot-module-replacement.md
+++ b/content/guides/hot-module-replacement.md
@@ -270,9 +270,9 @@ __index.js__
   if (module.hot) {
     module.hot.accept('./print.js', function() {
       console.log('Accepting the updated printMe module!');
-     document.body.removeChild(element);
-     element = component(); // Re-render the "component" to update the click handler
-     document.body.appendChild(element);
+      document.body.removeChild(element);
+      element = component(); // Re-render the "component" to update the click handler
+      document.body.appendChild(element);
     })
   }