Make example config more consistent

Previously, the config had been split between the config.js file and the CLI; everything has been moved into the config file.

The explanation for the config entries was moved inline, as comments.

Author: jmreidy

content/how-to/hot-module-reload.md

@@ -1,12 +1,23 @@
 ---
 title: How to Configure Hot Module Replacement?
 ---
-Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running without a page reload. HMR is particularly useful in applications using a single state tree, since components are "dumb" and will reflect the latest application state, even after their source is changed and they are replaced. 
-
-Webpack's power lies in its customizablity, and there are MANY ways of configuring HMR given the needs of a particular project. The approach described below uses Babel and React, but these tools are not necessary for HMR to work. If you'd like to see examples of other approaches, please request them or, better yet, open up a PR with an addition! 
+Hot Module Replacement (HMR) exchanges, adds, or removes modules while an
+application is running without a page reload.
+HMR is particularly useful in applications using a single state tree,
+since components are "dumb" and will reflect the latest application state, even
+after their source is changed and they are replaced.
+
+Webpack's power lies in its customizablity, and there are MANY ways of configuring HMR
+given the needs of a particular project. The approach described below uses Babel and
+React, but these tools are not necessary for HMR to work.
+If you'd like to see examples of other approaches,
+please request them or, better yet,
+[open up a PR with an addition](https://github.com/webpack/webpack.io)!
 
 ##Project Config
-This guide will be demonstrating the use of HMR with Babel, React, and PostCSS (using CSS Modules). To follow along, please add the following deps to your `package.json`:
+This guide will be demonstrating the use of HMR with Babel,
+React, and PostCSS (using CSS Modules).
+To follow along, please add the following deps to your `package.json`:
 
 To use HMR, you'll need the following dependencies:
 
@@ -17,7 +28,7 @@ npm install --save-dev [email protected] [email protected] [email protected] babel-pr
 In addition, for the purposes of this walkthrough, you'll need:
 
 ```shell
-npm install --save [email protected] [email protected] 
+npm install --save [email protected] [email protected]
 ```
 
 
@@ -27,10 +38,10 @@ Your `.babelrc` file should look like the following:
 ```js
 {
   "presets": [
-    ["es2015", {"modules": false}], 
+    ["es2015", {"modules": false}],
     //Webpack understands the native import syntax, and uses it for tree shaking
 
-    "stage-2", 
+    "stage-2",
     //Specifies what level of language features to activate.
     //State 2 is "draft", 4 is finished, 0 is strawman.
     //See https://tc39.github.io/process-document/
@@ -46,62 +57,104 @@ Your `.babelrc` file should look like the following:
 ```
 
 ###Webpack config
-While there's many ways of setting up your Webpack config - via API, via multiple or single config files, etc - here is the basic information you should have available:
+While there's many ways of setting up your Webpack config - via API,
+via multiple or single config files, etc - here is the basic information
+you should have available.
 
 ```js
 const { resolve } = require('path');
 const webpack = require('webpack');
 
-const ENTRY = ['./index.js'];
-
 module.exports = env => {
   return {
-    entry: env.dev?
-      [
-        'react-hot-loader/patch',
-        'webpack-dev-server/client?http://localhost:8080',
-        'webpack/hot/only-dev-server',
-      ].concat(ENTRY)
-      :
-      ENTRY,
+    entry: [
+      'react-hot-loader/patch',
+      //activate HMR for React
+
+      'webpack-dev-server/client?http://localhost:8080',
+      //bundle the client for webpack dev server
+      //and connect to the provided endpoint
+
+      'webpack/hot/only-dev-server',
+      //bundle the client for hot reloading
+      //only- means to only hot reload for successful updates
+
+
+      './index.js'
+      //the entry point of our app
+    ],
     output: {
       filename: 'bundle.js',
+      //the output bundle
+
       path: resolve(__dirname, 'dist'),
+
       publicPath: '/'
+      //necessary for HMR to know where to load the hot update chunks
     },
+
     context: resolve(__dirname, 'src'),
-    devtool: env.prod ? 'source-map' : 'inline-source-map',
+
+    devtool: 'inline-source-map',
+
     devServer: {
       hot: true,
+      //activate hot reloading
+
+      contentBase: '/dist'
+      //match the output path
+
       publicPath: '/'
+      //match the output publicPath
     },
+
     module: {
       loaders: [
-        { test: /\.js$/, loader: 'babel',
-          exclude: /node_modules/ },
+        { test: /\.js$/,
+          loaders: [
+            'babel',
+          ],
+          exclude: /node_modules/
+        },
         {
           test: /\.css$/,
-          loader: 'style!css-loader?modules&postcss-loader',
+          loaders: [
+            'style',
+            'css-loader?modules',
+            'postcss-loader',
+          ],
         },
       ],
     },
+
     plugins: [
       new webpack.HotModuleReplacementPlugin(),
+      //activates HMR
+
       new webpack.NamedModulesPlugin(),
+      //prints more readable module names in the browser console on HMR updates
     ],
   }
 };
 ```
 
-There's a lot going on above, and not all of it is related to HMR. If you are new to Webpack configs, please see the documentation elsewhere on this site. The basic assumption here is that your JS entry is located at `./src/index.js`, and that you're using CSS Modules for your styling. Let's look at the HMR specific items.
+There's a lot going on above, and not all of it is related to HMR.
+You may benefit from reading the
+[full documentation](https://webpack.github.io/docs/webpack-dev-server.html)
+on webpack dev server, and the [other articles](https://webpack.github.io/webpack.io/concepts/)
+here on webpack.io.
 
-First, the plugins. While only the HMRPlugin itself is necessary to enable HMR, the NamedModulesPlugin will make your life easier by showing an intelligible module id in your browser console whenever a file is changed.
+The basic assumption here is that your JS entry is located at `./src/index.js`,
+and that you're using CSS Modules for your styling.
 
-Next, working backward, is the `devServer` key. While it's possible to configure webpack-dev-server directly from the CLI, or more specifically in a server script from the Node module API, this example approach is using the `devServer` key in the overall webpack config. `hot: true` turns on HMR. `publicPath` denotes the root from wich the server will serve up your code (e.g. `localhost:8080${PUBLIC_PATH}`, so in this case `localhost:8080/`). the `publicPath` should match the `output.publicPath`.
+Please see the comments inline that explain each portion of the config. The main
+areas to look are the `devServer` key and the `entry` key. The `HotModuleReplacementPlugin` is
+also necessary to include in the `plugins` array.
 
-Finally, your entry file should be preceded by the elements included here: `'react-hot-loader/patch'`, `'webpack-dev-server/client?http://localhost:8080'`, and `'webpack/hot/only-dev-server'`. The react-hot-loader entry is only necessary if you are using React. The `webpack-dev-server/client?` line should make sure to point at the dev server instance you are running (in case you have configured a different port, for example). Finally, the `only` in `hot/only-dev-server` means that updates will only be sent on clean builds/bundles; you can drop the `only-` if you would prefer seeing error output in your browser via HMR.
-
-The module loaders in this config, while not specific to HMR, are worth noting here; we're making sure to use Babel (as configued in the .babelrc) for our JS files, and setting up CSS Modules for our CSS code.
+There are two modules included here for the purposes of this guide.
+The react-hot-loader addition to the entry, as noted above, is necessary to enable
+HMR with React components. The NamedModulesPlugin is a useful addition
+to better understand what modules are being updated when using HMR.
 
 ###Code
 In this guide, we're using the following files:
@@ -154,23 +207,42 @@ export default App;
 }
 ```
 
-Now, the above code is using React, but it doesn't need to be. In fact, the only thing that matters above is the code refering to `module`. First, we wrap the HMR code inside of `module.hot` check; webpack exposes `module` to the code, and if we are running with `hot: true` configured, we'll enter the inside of the conditional. While the module API offers more options than what's above, the most important element is the `module.hot.accept` call. It specific how to handle changes to specific dependencies. So in this, it will file the `render` method ONLY when `src/components/App.js` changes! Note that would also include when the dependencies of `App.js` change - so the `render` method will file not just for changes made directly to the source of `App.js`, but also changes made to `App.css`, since `App.css` is included in `App.js`.
+Now, the above code is using React, but it doesn't need to be. In fact,
+the only thing that matters above is the code refering to `module`.
+First, we wrap the HMR code inside of `module.hot` check;
+webpack exposes `module` to the code, and if we are running with `hot: true` configured,
+we'll enter the inside of the conditional.
+
+While the module API offers more options than what's above, the most
+important element is the `module.hot.accept` call.
+It specific how to handle changes to specific dependencies.
+
+So in this case, `module.hot` will fire the `render` method ONLY
+when `src/components/App.js` changes! Note that would also include when the
+dependencies of `App.js` change -
+so the `render` method will file not just for changes made directly to the
+source of `App.js`, but also changes made to `App.css`, since `App.css`
+is included in `App.js`.
 
 ###Package.json
-Finally, we need to start up webpack dev server to bundle our code and see HMR in action. We can use the following package.json entry:
+Finally, we need to start up webpack dev server to bundle our code and see HMR in action.
+We can use the following package.json entry:
 
 ```js
-  "start" : "webpack-dev-server --env.dev --content-base dist",
+  "start" : "webpack-dev-server --env.dev",
 ```
 
-Run `npm start`, open up your browser to `localhost:8080`, and you should see the folling entries printed in your console.log:
-``` 
+Run `npm start`, open up your browser to `localhost:8080`,
+and you should see the folling entries printed in your console.log:
+
+```
 dev-server.js:49[HMR] Waiting for update signal from WDS...
 only-dev-server.js:74[HMR] Waiting for update signal from WDS...
 client?c7c8:24 [WDS] Hot Module Replacement enabled.
 ```
 
-Go ahead and edit and save your App.js file. You should see something like the following in your console.log:
+Go ahead and edit and save your App.js file.
+You should see something like the following in your console.log:
 
 ```
 [WDS] App updated. Recompiling...
@@ -180,6 +252,7 @@ log-apply-result.js:20 [HMR] Updated modules:
 log-apply-result.js:22 [HMR]  - ./components/App.js
 dev-server.js:27 [HMR] App is up to date.
 ```
-Note that HMR specifies the paths of the updated modules. That's because we're using the NamedModules plugin!
+Note that HMR specifies the paths of the updated modules.
+That's because we're using the NamedModules plugin!