From c3562d4071ab05191752816d87814c7e8d161337 Mon Sep 17 00:00:00 2001
From: Sean Larkin <sean.larkin@cuw.edu>
Date: Tue, 23 Aug 2016 21:41:06 -0500
Subject: [PATCH] docs(concepts): added new targets section (#71)

* docs(concepts): added new target section
* Fixed #14
---
 content/concepts/targets.md        | 86 +++++++++++++++++++++++++++---
 styles/components/_blockquote.scss |  5 +-
 2 files changed, 83 insertions(+), 8 deletions(-)

diff --git a/content/concepts/targets.md b/content/concepts/targets.md
index e9168f190363..10faf07954c4 100644
--- a/content/concepts/targets.md
+++ b/content/concepts/targets.md
@@ -1,10 +1,82 @@
 ---
 title: Targets
 ---
-> webworker
-> node
-> async-node
-> node-webkit
-> electron
-> electron-main
-> electron-renderer
+## Overview
+
+Because JavaScript can be written for both server and browser, webpack offers multiple deployment _targets_ that you can set in your webpack [configuration](./api/configuration).
+
+W> The webpack `target` property is not to be confused with the `output.libraryTarget` property. For more information see [our guide](./concepts/output) on the `output` property.
+
+
+### Usage
+
+To set the `target` property, you simply set the target value in your webpack config: 
+
+
+**webpack.config.js**
+
+```javascript
+module.exports = config;
+
+config = {
+  target: 'node' 
+}
+```
+
+### Options
+
+The following is a list of values you can pass to the `target` property. 
+
+* `"web"` Compile for usage in a browser-like environment (default)
+* `"webworker"` Compile as WebWorker
+* `"node"` Compile for usage in a node.js-like environment (use `require` to load chunks)
+* `"async-node"` Compile for usage in a node.js-like environment (use `fs` and `vm` to load chunks async)
+* `"node-webkit"` Compile for usage in webkit, uses jsonp chunk loading but also supports build in node.js modules plus require("nw.gui") (experimental)
+* `"electron-main"` Compile for electron renderer process, provide a target using `JsonpTemplatePlugin`, `FunctionModulePlugin` for browser environment and `NodeTargetPlugin` and `ExternalsPlugin` for commonjs and electron bulit-in modules. *Note: need `webpack` >= 1.12.15.
+
+Each _target_ has a variety of deployment/environment specific additions, support to fit its needs. 
+
+For example, when you use the `electron-main` _target_, *webpack* includes multiple `electron-main` specific variables. For more information on which templates and _externals_ are used, you can refer [directly to the webpack source code](https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js#L70-L185).
+
+?> We should expand on this further. What specifically is included.
+
+### Multiple Targets
+
+Although webpack does **not** support multiple strings being passed into the `target` property, you can create an isomorphic library by bundling two separate configurations: 
+
+**webpack.config.js**
+```javascriptis
+
+module.exports = [ serverConfig, clientConfig ];
+
+var serverConfig = {
+  target: 'node',
+  output: {
+    path: 'dist',
+    filename: 'lib.node.js'
+  }
+  //... 
+}
+
+var clientConfig = {
+  target: 'web' // <=== can be omitted as default is 'web'
+  output: {
+    path: 'dist'
+    filename: 'lib.js'
+  }
+  //...
+}
+
+```
+
+The example above will create a `lib.js` and `lib.node.js` file in your `dist` folder.
+
+### Resources
+
+As seen from the options above there are multiple different deployment _targets_ that you can choose from. Below is a list of examples, and resources that you can refer to. 
+
+#### Bundle Output Comparison:
+  **[compare-webpack-target-bundles](https://github.com/TheLarkInn/compare-webpack-target-bundles)**: A great resource for testing and viewing different webpack _targets_. Also great for bug reporting. 
+
+?> Need to find up to date examples of these webpack targets being used in live code or boilerplates.
+
diff --git a/styles/components/_blockquote.scss b/styles/components/_blockquote.scss
index cc39d13551c4..6740f19964f4 100644
--- a/styles/components/_blockquote.scss
+++ b/styles/components/_blockquote.scss
@@ -9,7 +9,10 @@ blockquote {
   font-size: 80%;
   border-radius: 7px;
 
-  code { color: black; }
+  code { 
+    color: black;
+  }
+
   p { margin: 0; }
 
   &.tip,