From 2c75064a26542dca4e5f8b31ff1743b47a89c436 Mon Sep 17 00:00:00 2001
From: Ryan Palo <ryan@thepalos.com>
Date: Mon, 26 Feb 2018 06:17:32 -0800
Subject: [PATCH 1/8] docs(Guides): Fix error in Getting Started

Fixes error in Getting Started Guide
---
 src/content/guides/getting-started.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/guides/getting-started.md b/src/content/guides/getting-started.md
index 669e336cf604..955b55123d98 100644
--- a/src/content/guides/getting-started.md
+++ b/src/content/guides/getting-started.md
@@ -144,7 +144,7 @@ In this setup, `index.js` explicitly requires `lodash` to be present, and binds
 With that said, let's run `npx webpack` with our script as the [entry point](/concepts/entry-points) and `bundle.js` as the [output](/concepts/output). The `npx` command, which ships with Node 8.2 or higher, runs the webpack binary (`./node_modules/.bin/webpack`) of the webpack package we installed in the beginning:
 
 ``` bash
-npx webpack src/index.js dist/bundle.js
+npx webpack src/index.js --output dist/bundle.js
 
 Hash: 857f878815ce63ad5b4f
 Version: webpack 3.9.1

From 650f69efa3240018272270932f3d734009d05307 Mon Sep 17 00:00:00 2001
From: Reinier Kaper <rp.kaper+github@gmail.com>
Date: Mon, 26 Feb 2018 22:53:39 -0500
Subject: [PATCH 2/8] Updated getting-started.md

* Changes the guide so it reflects webpack 4 output.
* Changes some wordings here and there and adds some clarifications.
* Adds `webpack-cli` install which is required with v4
---
 src/content/guides/getting-started.md | 96 ++++++++++++++++++---------
 1 file changed, 64 insertions(+), 32 deletions(-)

diff --git a/src/content/guides/getting-started.md b/src/content/guides/getting-started.md
index 955b55123d98..7722f8bd5f34 100644
--- a/src/content/guides/getting-started.md
+++ b/src/content/guides/getting-started.md
@@ -20,15 +20,18 @@ Webpack is used to compile JavaScript modules. Once [installed](/guides/installa
 
 ## Basic Setup
 
-First let's create a directory, initialize npm, and [install webpack locally](/guides/installation#local-installation):
+First let's create a directory, initialize npm, [install webpack locally](/guides/installation#local-installation), and install the webpack-cli (which we'll need to run webpack from the command line (CLI)):
 
 ``` bash
 mkdir webpack-demo && cd webpack-demo
 npm init -y
 npm install --save-dev webpack
+npm install --save-dev webpack-cli
 ```
 
-Now we'll create the following directory structure and contents:
+T> Throughout the Guides we will use `diff` blocks to show you what changes we're making to directories, files, code, etc. For example: below we're adding `index.html` (file), `/src` (directory), and `index.js` (file).
+
+Now we'll create the following directory structure, files and their contents:
 
 __project__
 
@@ -69,7 +72,7 @@ __index.html__
 </html>
 ```
 
-In this example, there are implicit dependencies between the `<script>` tags. Our `index.js` file depends on `lodash` being included in the page before it runs. This is because `index.js` never declared a need for `lodash`; it just assumes that the global variable `_` exists.
+In this example, there are implicit dependencies between the `<script>` tags. Our `index.js` file depends on `lodash` being included in the page before it runs. This is because `index.js` never explicitly declared a need for `lodash`; it just assumes that the global variable `_` exists.
 
 There are problems with managing JavaScript projects this way:
 
@@ -99,7 +102,7 @@ __project__
 To bundle the `lodash` dependency with `index.js`, we'll need to install the library locally...
 
 ``` bash
-npm install --save lodash
+npm install --save-dev lodash
 ```
 
 and then import it in our script...
@@ -146,18 +149,23 @@ With that said, let's run `npx webpack` with our script as the [entry point](/co
 ``` bash
 npx webpack src/index.js --output dist/bundle.js
 
-Hash: 857f878815ce63ad5b4f
-Version: webpack 3.9.1
-Time: 332ms
-    Asset    Size  Chunks                    Chunk Names
-bundle.js  544 kB       0  [emitted]  [big]  main
-   [0] ./src/index.js 222 bytes {0} [built]
+Hash: dabab1bac2b940c1462b
+Version: webpack 4.0.1
+Time: 3003ms
+Built at: 2018-2-26 22:42:11
+    Asset      Size  Chunks             Chunk Names
+bundle.js  69.6 KiB       0  [emitted]  main
+Entrypoint main = bundle.js
+   [1] (webpack)/buildin/module.js 519 bytes {0} [built]
    [2] (webpack)/buildin/global.js 509 bytes {0} [built]
-   [3] (webpack)/buildin/module.js 517 bytes {0} [built]
+   [3] ./src/index.js 256 bytes {0} [built]
     + 1 hidden module
+
+WARNING in configuration
+The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
 ```
 
-T> Your output may vary a bit, but if the build is successful then you are good to go.
+T> Your output may vary a bit, but if the build is successful then you are good to go. Also, don't worry about the warning, we'll tackle that later.
 
 Open `index.html` in your browser and, if everything went right, you should see the following text: 'Hello webpack'.
 
@@ -173,7 +181,7 @@ Note that webpack will not alter any code other than `import` and `export` state
 
 ## Using a Configuration
 
-Most projects will need a more complex setup, which is why webpack supports a [configuration file](/concepts/configuration). This is much more efficient than having to type in a lot of commands in the terminal, so let's create one to replace the CLI options used above:
+As of version 4, webpack doesn't require any configuration, but most projects will need a more complex setup, which is why webpack supports a [configuration file](/concepts/configuration). This is much more efficient than having to manually type in a lot of commands on the CLI, so let's create one to replace the CLI line options used above:
 
 __project__
 
@@ -201,20 +209,25 @@ module.exports = {
 };
 ```
 
-Now, let's run the build again but instead using our new configuration:
+Now, let's run the build again but instead using our new configuration file:
 
 ``` bash
 npx webpack --config webpack.config.js
 
-Hash: 857f878815ce63ad5b4f
-Version: webpack 3.9.1
-Time: 298ms
-    Asset    Size  Chunks                    Chunk Names
-bundle.js  544 kB       0  [emitted]  [big]  main
-   [0] ./src/index.js 222 bytes {0} [built]
+Hash: dabab1bac2b940c1462b
+Version: webpack 4.0.1
+Time: 328ms
+Built at: 2018-2-26 22:47:43
+    Asset      Size  Chunks             Chunk Names
+bundle.js  69.6 KiB       0  [emitted]  main
+Entrypoint main = bundle.js
+   [1] (webpack)/buildin/module.js 519 bytes {0} [built]
    [2] (webpack)/buildin/global.js 509 bytes {0} [built]
-   [3] (webpack)/buildin/module.js 517 bytes {0} [built]
+   [3] ./src/index.js 256 bytes {0} [built]
     + 1 hidden module
+
+WARNING in configuration
+The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
 ```
 
 W> Note that when calling `webpack` via its path on windows, you must use backslashes instead, e.g. `node_modules\.bin\webpack --config webpack.config.js`.
@@ -230,14 +243,28 @@ Given it's not particularly fun to run a local copy of webpack from the CLI, we
 
 __package.json__
 
-``` json
+``` diff
 {
-  ...
+  "name": "webpack-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
   "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack"
   },
-  ...
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "webpack": "^4.0.1",
+    "webpack-cli": "^2.0.9"
+  },
+  "dependencies": {
+    "lodash": "^4.17.5"
+  }
 }
+
 ```
 
 Now the `npm run build` command can be used in place of the `npx` command we used earlier. Note that within `scripts` we can reference locally installed npm packages by name the same way we did with `npx`. This convention is the standard in most npm-based projects because it allows all contributors to use the same set of common scripts (each with flags like `--config` if necessary).
@@ -247,15 +274,20 @@ Now run the following command and see if your script alias works:
 ``` bash
 npm run build
 
-Hash: 857f878815ce63ad5b4f
-Version: webpack 3.9.1
-Time: 294ms
-    Asset    Size  Chunks                    Chunk Names
-bundle.js  544 kB       0  [emitted]  [big]  main
-   [0] ./src/index.js 222 bytes {0} [built]
+Hash: dabab1bac2b940c1462b
+Version: webpack 4.0.1
+Time: 323ms
+Built at: 2018-2-26 22:50:25
+    Asset      Size  Chunks             Chunk Names
+bundle.js  69.6 KiB       0  [emitted]  main
+Entrypoint main = bundle.js
+   [1] (webpack)/buildin/module.js 519 bytes {0} [built]
    [2] (webpack)/buildin/global.js 509 bytes {0} [built]
-   [3] (webpack)/buildin/module.js 517 bytes {0} [built]
+   [3] ./src/index.js 256 bytes {0} [built]
     + 1 hidden module
+
+WARNING in configuration
+The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
 ```
 
 T> Custom parameters can be passed to webpack by adding two dashes between the `npm run build` command and your parameters, e.g. `npm run build -- --colors`.
@@ -279,6 +311,6 @@ webpack-demo
 |- /node_modules
 ```
 
-T> If you're using npm 5, you'll probably also see a `package-lock.json` file in your directory.
+T> If you're using npm 5, you'll probably also see a `package-lock.json` file in your directory as well.
 
 If you want to learn more about webpack's design, you can check out the [basic concepts](/concepts) and [configuration](/configuration) pages. Furthermore, the [API](/api) section digs into the various interfaces webpack offers.

From f3464fbcd1c14fa5ca944663e4ba8445eddc7a72 Mon Sep 17 00:00:00 2001
From: Reinier Kaper <reinier@canvaspop.com>
Date: Tue, 27 Feb 2018 08:33:21 -0500
Subject: [PATCH 3/8] Processed first round of feedback

---
 src/content/guides/getting-started.md | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/content/guides/getting-started.md b/src/content/guides/getting-started.md
index 7722f8bd5f34..562a4fae54ef 100644
--- a/src/content/guides/getting-started.md
+++ b/src/content/guides/getting-started.md
@@ -20,16 +20,15 @@ Webpack is used to compile JavaScript modules. Once [installed](/guides/installa
 
 ## Basic Setup
 
-First let's create a directory, initialize npm, [install webpack locally](/guides/installation#local-installation), and install the webpack-cli (which we'll need to run webpack from the command line (CLI)):
+First let's create a directory, initialize npm, [install webpack locally](/guides/installation#local-installation), and install the webpack-cli (the tool used to run webpack on the command line):
 
 ``` bash
 mkdir webpack-demo && cd webpack-demo
 npm init -y
-npm install --save-dev webpack
-npm install --save-dev webpack-cli
+npm install webpack webpack-cli --save-dev
 ```
 
-T> Throughout the Guides we will use `diff` blocks to show you what changes we're making to directories, files, code, etc. For example: below we're adding `index.html` (file), `/src` (directory), and `index.js` (file).
+T> Throughout the Guides we will use `diff` blocks to show you what changes we're making to directories, files, and code.
 
 Now we'll create the following directory structure, files and their contents:
 
@@ -147,7 +146,7 @@ In this setup, `index.js` explicitly requires `lodash` to be present, and binds
 With that said, let's run `npx webpack` with our script as the [entry point](/concepts/entry-points) and `bundle.js` as the [output](/concepts/output). The `npx` command, which ships with Node 8.2 or higher, runs the webpack binary (`./node_modules/.bin/webpack`) of the webpack package we installed in the beginning:
 
 ``` bash
-npx webpack src/index.js --output dist/bundle.js
+npx webpack
 
 Hash: dabab1bac2b940c1462b
 Version: webpack 4.0.1
@@ -181,7 +180,7 @@ Note that webpack will not alter any code other than `import` and `export` state
 
 ## Using a Configuration
 
-As of version 4, webpack doesn't require any configuration, but most projects will need a more complex setup, which is why webpack supports a [configuration file](/concepts/configuration). This is much more efficient than having to manually type in a lot of commands on the CLI, so let's create one to replace the CLI line options used above:
+As of version 4, webpack doesn't require any configuration, but most projects will need a more complex setup, which is why webpack supports a [configuration file](/concepts/configuration). This is much more efficient than having to manually type in a lot of commands in the terminal, so let's create one to replace the CLI line options used above:
 
 __project__
 
@@ -311,6 +310,6 @@ webpack-demo
 |- /node_modules
 ```
 
-T> If you're using npm 5, you'll probably also see a `package-lock.json` file in your directory as well.
+T> If you're using npm 5, you'll probably also see a `package-lock.json` file in your directory.
 
 If you want to learn more about webpack's design, you can check out the [basic concepts](/concepts) and [configuration](/configuration) pages. Furthermore, the [API](/api) section digs into the various interfaces webpack offers.

From 90d4d44775dcd59ae9c778593607f2e79592de4c Mon Sep 17 00:00:00 2001
From: Reinier Kaper <reinier@canvaspop.com>
Date: Tue, 27 Feb 2018 08:57:11 -0500
Subject: [PATCH 4/8] Added diff to package.json example

---
 src/content/guides/getting-started.md | 36 +++++++++++++--------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/content/guides/getting-started.md b/src/content/guides/getting-started.md
index 562a4fae54ef..d6b41fb6b8ca 100644
--- a/src/content/guides/getting-started.md
+++ b/src/content/guides/getting-started.md
@@ -243,26 +243,24 @@ Given it's not particularly fun to run a local copy of webpack from the CLI, we
 __package.json__
 
 ``` diff
-{
-  "name": "webpack-demo",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "webpack": "^4.0.1",
-    "webpack-cli": "^2.0.9"
-  },
-  "dependencies": {
-    "lodash": "^4.17.5"
+  {
+    "name": "webpack-demo",
+    "version": "1.0.0",
+    "description": "",
+    "main": "index.js",
+    "scripts": {
+      "test": "echo \"Error: no test specified\" && exit 1",
++     "build": "webpack"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+      "webpack": "^4.0.1",
+      "webpack-cli": "^2.0.9",
+      "lodash": "^4.17.5"
+    }
   }
-}
 
 ```
 

From 785a6b7b4497477398da4ec03411acedeb3af208 Mon Sep 17 00:00:00 2001
From: Reinier Kaper <reinier@canvaspop.com>
Date: Wed, 28 Feb 2018 14:54:46 -0500
Subject: [PATCH 5/8] Added more info about npm, package.json.

---
 src/content/guides/getting-started.md | 34 ++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/content/guides/getting-started.md b/src/content/guides/getting-started.md
index d6b41fb6b8ca..acd04b84fbff 100644
--- a/src/content/guides/getting-started.md
+++ b/src/content/guides/getting-started.md
@@ -71,6 +71,32 @@ __index.html__
 </html>
 ```
 
+We also need to adjust our `package.json` file in order to make sure we mark our package as `private`, as well as removing the `main` entry. This is to prevent an accidental publish of your code.
+
+T> If you want to learn more about the inner workings of `package.json`, then we recommend reading [the npm documentation](https://docs.npmjs.com/files/package.json).
+
+__package.json__
+``` diff
+  {
+    "name": "webpack-demo",
+    "version": "1.0.0",
+    "description": "",
++   "private": true,
+-   "main": "index.js",
+    "scripts": {
+      "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+      "webpack": "^4.0.1",
+      "webpack-cli": "^2.0.9"
+    },
+    "dependencies": {}
+  }
+```
+
 In this example, there are implicit dependencies between the `<script>` tags. Our `index.js` file depends on `lodash` being included in the page before it runs. This is because `index.js` never explicitly declared a need for `lodash`; it just assumes that the global variable `_` exists.
 
 There are problems with managing JavaScript projects this way:
@@ -98,13 +124,15 @@ __project__
     |- index.js
 ```
 
-To bundle the `lodash` dependency with `index.js`, we'll need to install the library locally...
+To bundle the `lodash` dependency with `index.js`, we'll need to install the library locally:
 
 ``` bash
-npm install --save-dev lodash
+npm install --save lodash
 ```
 
-and then import it in our script...
+T> As a rule of thumb: if you're installing a package that will be bundled into your rpdocution code, then you should use `npm install --save`. If you're installing a package to help development (e.g. a linter, testing libraries, etc.) then you should use `npm install --save-dev`. More information can be found in the [npm documentation](https://docs.npmjs.com/cli/install).
+
+Now, lets import `lodash` in our script:
 
 __src/index.js__
 

From b0c08ea5e2c881a44bc3323fa00d3b13bafb134a Mon Sep 17 00:00:00 2001
From: Reinier Kaper <reinier@canvaspop.com>
Date: Wed, 28 Feb 2018 14:55:45 -0500
Subject: [PATCH 6/8] Minor textual edit

---
 src/content/guides/getting-started.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/guides/getting-started.md b/src/content/guides/getting-started.md
index acd04b84fbff..554d674ea089 100644
--- a/src/content/guides/getting-started.md
+++ b/src/content/guides/getting-started.md
@@ -73,7 +73,7 @@ __index.html__
 
 We also need to adjust our `package.json` file in order to make sure we mark our package as `private`, as well as removing the `main` entry. This is to prevent an accidental publish of your code.
 
-T> If you want to learn more about the inner workings of `package.json`, then we recommend reading [the npm documentation](https://docs.npmjs.com/files/package.json).
+T> If you want to learn more about the inner workings of `package.json`, then we recommend reading the [npm documentation](https://docs.npmjs.com/files/package.json).
 
 __package.json__
 ``` diff

From 78a79cfb03040bb9182b200c35e68ceabd643223 Mon Sep 17 00:00:00 2001
From: Reinier Kaper <reinier@canvaspop.com>
Date: Wed, 28 Feb 2018 19:07:58 -0500
Subject: [PATCH 7/8] Typo + better wording for npm tip

---
 src/content/guides/getting-started.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/guides/getting-started.md b/src/content/guides/getting-started.md
index 554d674ea089..93e4579a256f 100644
--- a/src/content/guides/getting-started.md
+++ b/src/content/guides/getting-started.md
@@ -130,7 +130,7 @@ To bundle the `lodash` dependency with `index.js`, we'll need to install the lib
 npm install --save lodash
 ```
 
-T> As a rule of thumb: if you're installing a package that will be bundled into your rpdocution code, then you should use `npm install --save`. If you're installing a package to help development (e.g. a linter, testing libraries, etc.) then you should use `npm install --save-dev`. More information can be found in the [npm documentation](https://docs.npmjs.com/cli/install).
+T> When installing a package that will be bundled into your production bundle, you should use `npm install --save`. If you're installing a package for development purposes (e.g. a linter, testing libraries, etc.) then you should use `npm install --save-dev`. More information can be found in the [npm documentation](https://docs.npmjs.com/cli/install).
 
 Now, lets import `lodash` in our script:
 

From f97ccd940e0ee5763d4e74d4b7a0440b09dc91f7 Mon Sep 17 00:00:00 2001
From: Reinier Kaper <reinier@canvaspop.com>
Date: Thu, 1 Mar 2018 08:51:21 -0500
Subject: [PATCH 8/8] Added doctype

---
 src/content/guides/getting-started.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/content/guides/getting-started.md b/src/content/guides/getting-started.md
index 93e4579a256f..dc36f4dd2ae4 100644
--- a/src/content/guides/getting-started.md
+++ b/src/content/guides/getting-started.md
@@ -60,6 +60,7 @@ document.body.appendChild(component());
 __index.html__
 
 ``` html
+<!doctype html>
 <html>
   <head>
     <title>Getting Started</title>
@@ -157,6 +158,7 @@ Now, since we'll be bundling our scripts, we have to update our `index.html` fil
 __dist/index.html__
 
 ``` diff
+  <!doctype html>
   <html>
    <head>
      <title>Getting Started</title>