Deploy (#397)

* Improve resolve docs

* Fix typo

* Add table text

I just want to trigger a rebuild so the CLAbot works

* More consistency

But really CLAbot is buggy today...

* Fixed small typo in get started guide

* Fixes some typos in Get Started with Webpack

Adds a missing comma in webpack.config.js code example and a word in 'Using webpack with npm' section.

* Minor text fixes

* Use double quotes in html for consistency

* Feature/add version to sidebar (#395)

* feat(sidebar): add version in desktop sidebar

* feat(sidebar): update bottom margin

* Update sidebar.jsx

remove unused var

* fix(sidebar): fix index pages missing from section and fix layout

* Improve HMR docs (#389)

* Improve HMR docs

* Fix link

* Add concept page for HMR

* Small improvements

Really I just want to trigger a rebuild because the clabot is not working.

* More devtool docs (#375)

Author: SpaceK33z

components/sidebar-item/sidebar-item-style.scss

@@ -34,6 +34,10 @@
     margin: 0.5em 0 1em;
   }
 
+  &__version {
+    margin-bottom: 10px;
+  }
+
   &__anchor {
     margin:0.25em 0;
 

components/sidebar-mobile/sidebar-mobile-style.scss

@@ -63,6 +63,15 @@
   text-transform: uppercase;
   color: getColor(mine-shaft);
   margin: 1em 16px 0.25em;
+
+  &--block {
+    display: block;
+  }
+
+  &:active,
+  &--active {
+    color: getColor(malibu);
+  }
 }
 
 .sidebar-mobile__page {

components/sidebar-mobile/sidebar-mobile.jsx

@@ -58,12 +58,29 @@ export default class SidebarMobile extends React.Component {
    * @return {array} - Markup containing sections and links
    */
   _getSections() {
-    return this.props.sections.map(section => (
-      <div key={ section.url }>
-        <h3 className='sidebar-mobile__section'>{ section.title }</h3>
-        { this._getPages(section.pages) }
-      </div>
-    ));
+    let pathname = '';
+
+    if (typeof window !== 'undefined') {
+      pathname = window.location.pathname;
+    }
+
+    return this.props.sections.map(section => {
+      let active = pathname === section.url || pathname.includes(`/${section.url}`),
+          absoluteUrl = `/${section.url}`;
+      return (
+        <div key={ absoluteUrl }>
+          <Link 
+            className={ `sidebar-mobile__section sidebar-mobile__section--block ${active ? 'sidebar-mobile__section--active' : ''}` } 
+            key={ absoluteUrl }
+            to={ absoluteUrl }
+            onClick={ this._close.bind(this) }>  
+            <h3>{ section.title }</h3>
+          </Link>
+          
+          { this._getPages(section.pages) }
+        </div>
+      );
+    });
   }
 
   /**

components/sidebar/sidebar.jsx

@@ -8,12 +8,12 @@ export default props => {
   return (
     <nav className="sidebar">
       <div className="sidebar__inner">
+        <h3 className="sidebar-item__version">Version 2.1</h3>
         <SidebarItem 
           url={ `/${sectionName}` } 
           title="Introduction"
           currentPage= { currentPage }
         />
-
         {
           pages.map(({ url, title, anchors }, i) =>
             <SidebarItem

content/concepts/hot-module-replacement.md

@@ -0,0 +1,57 @@
+---
+title: Hot Module Replacement
+sort: 11
+contributors:
+- SpaceK33z
+- sokra
+---
+
+Hot Module Replacement (HMR) exchanges, adds, or removes modules while an
+application is running without a page reload. You basically can update changed modules without a full page reload.
+
+## How Does It Work?
+
+### From The App View
+
+The app code asks the HMR runtime to check of updates. The HMR runtime downloads the updates (async) and tell the app code that an update is available. The app code asks the HMR runtime to apply updates. The HMR runtime applies the update (sync). The app code may or may not require user interaction in this process (you decide).
+
+### From The Compiler (webpack) View
+
+In addition to the normal assets the compiler need to emit the "Update" to allow updating from previous version to this version. The "Update" contains two parts:
+
+1. the update manifest (JSON)
+2. one or multiple update chunks (JavaScript)
+
+The manifest contains the new compilation hash and a list of all update chunks (2.).
+
+The update chunks contains code for all updated modules in this chunk (or a flag if a module was removed).
+
+The compiler addtionally makes sure that module and chunk ids as consistent between these builds. It uses a "records" json file to store them between builds (on it store them in memory).
+
+### From The Module View
+
+HMR is an opt-in feature, so it only affects modules that contains HMR code. The documentation describes the API that is available in modules. In general the module developer writes handlers that are called when a dependency of this module is updated. The developer can also write a handler that is called when this module is updated.
+
+In most cases it's not mandatory to write HMR code in every module. If a module has no HMR handlers the update bubbles up. This means a single handler can handle a update to a complete module tree. If a single module in this tree is updated, the complete module tree is reloaded (only reloaded not transferred).
+
+### From The HMR Runtime View (Technical)
+
+For the module system runtime is additional code emitted to track module `parents` and `children`.
+
+On the management side the runtime supports two methods: `check` and `apply`.
+
+A `check` does a HTTP request to the update manifest. When this request fails, there is no update available. Elsewise the list of updated chunks is compared to the list of currently loaded chunks. For each loaded chunk the corresponding update chunk is downloaded. All module updates as stored in the runtime as update. The runtime switches into the `ready` state, meaning an update has been downloaded and is ready to be applied.
+
+For each new chunk request in the ready state the update chunk is also downloaded.
+
+The `apply` method flags all updated modules as invalid. For each invalid module there need to be a update handler in the module or update handlers in every parent. Else the invalid buddles up and mark all parents as invalid too. This process continues until no more "bubble up" occurs. If it bubbles up from an entry point the process fails.
+
+Now all invalid modules are disposed (dispose handler) and unloaded. Then the current hash is updated and all "accept" handlers are called. The runtime switches back to the `idle` state and everything continues as normal.
+
+## What can I do with it?
+
+You can use it in development as LiveReload replacement. webpack-dev-server supports a hot mode which tries to update with HMR before trying to reload the whole page. See how to implement [HMR with React](/guides/hmr-react) for example.
+
+Some loaders already generate modules that are hot-updateable. i.e. the `style-loader` can exchange the stylesheet. You don't need to do anything special.
+
+webpack's power lies in its customizability, and there are *many* ways of configuring HMR given the needs of a particular project.

content/concepts/index.md

@@ -7,7 +7,7 @@ contributors:
   - grgur
 ---
 
-*webpack* is a _module bundler_ for modern JavaScript applications. It is [incredibly configurable](/configuration), however, there are **4 Core Concepts** we feel you should understand before you get started!
+*webpack* is a _module bundler_ for modern JavaScript applications. It is [incredibly configurable](/configuration), however, there are **Four Core Concepts** we feel you should understand before you get started!
 
 As part of your webpack learning journey, we wrote this document aimed to give you a **high-level** overview of these concepts, while still providing links to concept specific use-cases.
 

content/configuration/devtool.md

@@ -4,29 +4,16 @@ sort: 10
 contributors:
   - sokra
   - skipjack
+  - SpaceK33z
 ---
 
-?> Description...
+This option controls if and how Source Maps are generated.
 
 ## `devtool`
 
-`string`
+`string` `false`
 
-Choose a style of [source mapping](http://blog.teamtreehouse.com/introduction-source-maps) to enhance the debugging process. Be aware that the following options can affect build and rebuild speed dramatically...
-
-`eval` - Each module is executed with `eval` and `//@ sourceURL`
-
-`source-map` - A full SourceMap is emitted
-
-`hidden-source-map` - Same as `source-map`, but doesn't add a reference comment to the bundle. Useful if you only want SourceMaps to map error stack traces from error reports, but don't want to expose your SourceMap for the browser development tools.
-
-`inline-source-map` - A SourceMap is added as DataUrl to the bundle
-
-`eval-source-map` - Each module is executed with `eval` and a SourceMap is added as DataUrl to the `eval`
-
-`cheap-source-map` - A SourceMap without column-mappings ignoring loaded source maps
-
-`cheap-module-source-map` - A SourceMap without column-mappings that simplifies loaded source maps to a single mapping per line
+Choose a style of [source mapping](http://blog.teamtreehouse.com/introduction-source-maps) to enhance the debugging process. These values can affect build and rebuild speed dramatically.
 
  devtool                      | build | rebuild | production | quality
 ------------------------------|-------|---------|------------|--------------------------
@@ -38,7 +25,36 @@ Choose a style of [source mapping](http://blog.teamtreehouse.com/introduction-so
  eval-source-map              | --    | +       | no         | original source
  source-map                   | --    | --      | yes        | original source
 
+Some of these values are suited for development and some for production. For development you typically want very fast Source Maps at the cost of bundle size, but for production you want separate Source Maps that are accurate.
+
+W> There are some issues with Source Maps in Chrome. [We need your help!](https://github.com/webpack/webpack/issues/3165).
+
+### For development
+
+`eval` - Each module is executed with `eval()` and `//@ sourceURL`. This is very fast. The main disadvantage is that it doesn't display line numbers correctly since it gets mapped to transpiled code instead of the original code.
+
+`inline-source-map` - A SourceMap is added as DataUrl to the bundle.
+
+`eval-source-map` - Each module is executed with `eval()` and a SourceMap is added as DataUrl to the `eval()`. Initially it is slow, but it provides fast rebuild speed and yields real files. Line numbers are correctly mapped since it gets mapped to the original code.
+
+`cheap-module-eval-source-map` - Like `eval-source-map`, each module is executed with `eval()` and a SourceMap is added as DataUrl to the `eval()`. It is "cheap" because it doesn't have column mappings, it only maps line numbers.
+
+### For production
+
+`source-map` - A full SourceMap is emitted as a separate file. It adds a reference comment to the bundle so development tools know where to find it.
+
+`hidden-source-map` - Same as `source-map`, but doesn't add a reference comment to the bundle. Useful if you only want SourceMaps to map error stack traces from error reports, but don't want to expose your SourceMap for the browser development tools.
+
+`cheap-source-map` - A SourceMap without column-mappings ignoring loaded Source Maps.
+
+`cheap-module-source-map` - A SourceMap without column-mappings that simplifies loaded Source Maps to a single mapping per line.
+
+T> See [`output.sourceMapFilename`](/configuration/output#output-sourcemapfilename) to customize the filenames of generated Source Maps.
+
+?> This page needs more information to make it easier for users to choose a good option.
 
-T> See [`output.sourceMapFilename`](/configuration/output#output-sourcemapfilename) to customize the filenames of generated source maps.
+# References
 
-?> This section is pretty much just copied over from existing docs... imo more background is needed on the different types of source mapping, maybe via links to external sites that discuss the different types of source maps in more detail.
+- [Enabling Sourcemaps](http://survivejs.com/webpack/developing-with-webpack/enabling-sourcemaps/)
+- [webpack devtool source map](http://cheng.logdown.com/posts/2016/03/25/679045
+)

content/configuration/other-options.md

@@ -22,19 +22,19 @@ amd: {
 
 ?> I don't think this is very clear, at least not without a link pointing to what this might be used for.
 
+
 ## `bail`
 
 `boolean`
 
-Fail out on the first error instead of tolerating it. By default webpack will log these errors in red in the terminal, as well as the browser console when using HMR, but continue bundling. Turning it on:
+Fail out on the first error instead of tolerating it. By default webpack will log these errors in red in the terminal, as well as the browser console when using HMR, but continue bundling. To enable it:
 
 ```js
 bail: true
 ```
 
-will force webpack to exit it's bundling process.
+This will force webpack to exit its bundling process.
 
-W> Note that this will become the default behavior in webpack 2.x
 
 ## `cache`
 
@@ -58,8 +58,10 @@ export default {
 ```
 
 W> Don't share the cache between calls with different options.
+
 ?> Elaborate on the warning and example - calls with different configuration options?
 
+
 ## `debug`
 
 `boolean`
@@ -80,6 +82,7 @@ Expose custom values into the loader context.
 
 ?> Add an example...
 
+
 ## `profile`
 
 `boolean`
@@ -88,18 +91,21 @@ Capture a "profile" of the application, including statistics and hints, which ca
 
 T> Use the [StatsPlugin](https://www.npmjs.com/package/stats-webpack-plugin) for more control over the generated profile.
 
+
 ## `recordsPath`
 
 Description...
 
 ?> Add example and description as well as details on `recordsInputPath` and `recordsOutputPath`.
 
+
 ## `recordsInputPath`
 
 Description...
 
 ?> Add example and description as well as details on `recordsInputPath` and `recordsOutputPath`.
 
+
 ## `recordsOutputPath`
 
 Description...