resolves #727

Author: johnathanstewartmlb

content/concepts/index.md

@@ -5,6 +5,7 @@ contributors:
   - TheLarkInn
   - jhnns
   - grgur
+  - johnstew
 ---
 
 *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!
@@ -111,12 +112,13 @@ In order to use a plugin, you just need to `require()` it and add it to the `plu
 ```javascript
 const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
 const webpack = require('webpack'); //to access built-in plugins
+const path = require('path');
 
 const config = {
   entry: './path/to/my/entry/file.js',
   output: {
-    filename: 'my-first-webpack.bundle.js',
-    path: './dist'
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'my-first-webpack.bundle.js'
   },
   module: {
     rules: [

content/concepts/plugins.md

@@ -5,6 +5,7 @@ contributors:
   - TheLarkInn
   - jhnns
   - rouzbeh84
+  - johnstew
 ---
 
 **Plugins** are the [backbone](https://github.com/webpack/tapable) of webpack. webpack itself is built on the **same plugin system** that you use in your webpack configuration!
@@ -46,12 +47,13 @@ Depending on how you are using webpack, there are multiple ways to use plugins.
 ```javascript
 const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
 const webpack = require('webpack'); //to access built-in plugins
+const path = require('path');
 
 const config = {
   entry: './path/to/my/entry/file.js',
   output: {
     filename: 'my-first-webpack.bundle.js',
-    path: './dist'
+    path: path.resolve(__dirname, 'dist')
   },
   module: {
     rules: [

content/concepts/targets.md

@@ -4,6 +4,7 @@ sort: 10
 contributors:
   - TheLarkInn
   - rouzbeh84
+  - johnstew
 ---
 
 Because JavaScript can be written for both server and browser, webpack offers multiple deployment _targets_ that you can set in your webpack [configuration](/configuration).
@@ -35,10 +36,11 @@ Although webpack does **not** support multiple strings being passed into the `ta
 **webpack.config.js**
 
 ```javascript
+var path = require('path');
 var serverConfig = {
   target: 'node',
   output: {
-    path: 'dist',
+    path: path.resolve(__dirname, 'dist'),
     filename: 'lib.node.js'
   }
   //…
@@ -47,7 +49,7 @@ var serverConfig = {
 var clientConfig = {
   target: 'web', // <=== can be omitted as default is 'web'
   output: {
-    path: 'dist',
+    path: path.resolve(__dirname, 'dist'),
     filename: 'lib.js'
   }
   //…

content/get-started/index.md

@@ -6,6 +6,7 @@ contributors:
   - varunjayaraman
   - cntanglijun
   - chrisVillanueva
+  - johnstew
 ---
 
 webpack is a tool to build JavaScript modules in your application. To start using `webpack` from its [cli](/api/cli) or [api](/api/node), follow the [Installation instructions](/get-started/install-webpack).
@@ -126,13 +127,15 @@ with the following config settings.
 
 __webpack.config.js__
 ```javascript
+var path = require('path');
+
 module.exports = {
   entry: './app/index.js',
   output: {
     filename: 'bundle.js',
-    path: './dist'
+    path: path.resolve(__dirname, 'dist')
   }
-}
+};
 ```
 
 This file can be run by webpack as follows.
@@ -176,4 +179,3 @@ T> You can pass custom parameters to webpack by adding two dashes to the `npm ru
 ## Conclusion
 
 Now that you have a basic build together, you should dig into the [basic concepts](/concepts) and [configuration](/configuration) of webpack to better understand its design. Also check out the [guides](/guides) to learn how to approach common problems. The [API](/api) section digs into the lower level features.
-

content/guides/author-libraries.md

@@ -3,6 +3,7 @@ title: Authoring Libraries
 sort: 18
 contributors:
     - pksjce
+    - johnstew
 ---
 
 webpack is a tool which can be used to bundle application code and also to bundle library code. If you are the author of a JavaScript library and are looking to streamline your bundle strategy then this document will help you.
@@ -80,11 +81,12 @@ Add basic webpack configuration.
 __webpack.config.js__
 
 ```javascript
+var path = require('path');
 
 module.exports = {
     entry: './src/index.js',
     output: {
-        path: './dist',
+        path: path.resolve(__dirname, 'dist'),
         filename: 'webpack-numbers.js'
     }
 };

content/guides/code-splitting-css.md

@@ -4,6 +4,7 @@ sort: 3
 contributors:
   - pksjce
   - jonwheeler
+  - johnstew
 ---
 
 In webpack, when you use the css-loader and import CSS into your JavaScript files, the CSS is bundled along with your JavaScript.
@@ -63,11 +64,13 @@ The full config for splitting css with `ExtractTextPlugin` is as follows
 
 ```javascript
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var path = require('path');
+
 module.exports = function () {
     return {
         entry: './main.js',
         output: {
-            path: './dist',
+            path: path.resolve(__dirname, 'dist'),
             filename: 'bundle.js'
         },
         module: {

content/guides/code-splitting-libraries.md

@@ -4,6 +4,7 @@ sort: 4
 contributors:
   - pksjce
   - chrisVillanueva
+  - johnstew
 ---
 
 A typical application uses third party libraries for framework/functionality needs. Particular versions of these libraries are used and code here does not change often. However, the application code changes frequently.
@@ -22,7 +23,6 @@ The index file will require `moment` as a dependency and log the current date as
 
 __index.js__
 ```javascript
-
 var moment = require('moment');
 console.log(moment().format());
 
@@ -33,13 +33,14 @@ We can bundle the application with webpack using the following config
 __webpack.config.js__
 
 ```javascript
+var path = require('path');
 
 module.exports = function(env) {
     return {
         entry: './index.js',
         output: {
             filename: '[chunkhash].[name].js',
-            path: './dist'
+            path: path.resolve(__dirname, 'dist')
         }
     }
 }
@@ -56,6 +57,7 @@ Let's try to mitigate this by adding a separate entry point for `moment` and nam
 __webpack.config.js__
 
 ```javascript
+var path = require('path');
 
 module.exports = function(env) {
     return {
@@ -65,7 +67,7 @@ module.exports = function(env) {
         },
         output: {
             filename: '[chunkhash].[name].js',
-            path: './dist'
+            path: path.resolve(__dirname, 'dist')
         }
     }
 }
@@ -84,8 +86,9 @@ We can modify our webpack config file to use the `CommonsChunkPlugin` as follows
 __webpack.config.js__
 
 ```javascript
-
 var webpack = require('webpack');
+var path = require('path');
+
 module.exports = function(env) {
     return {
         entry: {
@@ -94,7 +97,7 @@ module.exports = function(env) {
         },
         output: {
             filename: '[chunkhash].[name].js',
-            path: './dist'
+            path: path.resolve(__dirname, 'dist')
         },
         plugins: [
             new webpack.optimize.CommonsChunkPlugin({
@@ -118,8 +121,9 @@ To prevent this, we need extract out the runtime into a separate manifest file.
 __webpack.config.js__
 
 ```javascript
-
 var webpack = require('webpack');
+var path = require('path');
+
 module.exports = function(env) {
     return {
         entry: {
@@ -128,7 +132,7 @@ module.exports = function(env) {
         },
         output: {
             filename: '[chunkhash].[name].js',
-            path: './dist'
+            path: path.resolve(__dirname, 'dist')
         },
         plugins: [
             new webpack.optimize.CommonsChunkPlugin({

content/guides/code-splitting-require.md

@@ -4,6 +4,7 @@ sort: 5
 contributors:
   - pksjce
   - rahulcs
+  - johnstew
 ---
 
 In this section, we will discuss how webpack splits code using `require.ensure()`.
@@ -38,7 +39,7 @@ Let us consider the following project
     |    |-- b.js
     webpack.config.js
     |
-    dist 
+    dist
 ```
 
 ```javascript
@@ -58,13 +59,14 @@ console.log('***** I AM b *****');
 
 ```javascript
 \\ webpack.config.js
+var path = require('path');
 
 module.exports = function(env) {
     return {
         entry: './js/entry.js',
         output: {
             filename: 'bundle.js',
-            path: './dist'
+            path: path.resolve(__dirname, 'dist')
         }
     }
 }