docs(guides): fix snippet in hot-module-replacement (#1464)

Refactor examples in hot-module-replacement that yielded
build errors and warnings.

Resolves #1461

Author: maheshpec

content/guides/hot-module-replacement.md

@@ -28,7 +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.
+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__
 
@@ -39,8 +39,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 +73,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 +88,13 @@ __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 +132,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,7 +152,19 @@ __print.js__
     return element;
   }
 
-  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.
@@ -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
@@ -190,8 +191,7 @@ __webpack.config.js__
 
   module.exports = {
     entry: {
-      app: './src/index.js',
-      print: './src/print.js'
+      app: './src/index.js'
     },
     devtool: 'inline-source-map',
     devServer: {
@@ -250,17 +250,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');
@@ -275,7 +264,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.