More devtool docs (#375)

Author: SpaceK33z

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
+)