Merge the next branch

.gitignore

@@ -7,4 +7,4 @@ starter-kits-data.json
 .antwar
 .vscode
 .idea
-.DS_Store
+.DS_Store

src/content/api/plugins.md

@@ -96,5 +96,5 @@ different hook classes and how they work.
 
 ## Next Steps
 
-See the [compiler hooks](https://webpack.js.org/api/compiler-hooks/) section for a detailed listing of all the available
+See the [compiler hooks](/api/compiler-hooks/) section for a detailed listing of all the available
 `compiler` hooks and the parameters they make available.

src/content/concepts/configuration.md

@@ -28,14 +28,15 @@ T> The most important part to take away from this document is that there are man
 
 The following examples below describe how webpack's configuration object can be both expressive and configurable because _it is code_:
 
-## The Simplest Configuration
+## Simple Configuration
 
 **webpack.config.js**
 
 ```javascript
 var path = require('path');
 
 module.exports = {
+  mode: 'development',
   entry: './foo.js',
   output: {
     path: path.resolve(__dirname, 'dist'),

src/content/configuration/configuration-languages.md

@@ -30,6 +30,7 @@ import path from 'path';
 import webpack from 'webpack';
 
 const config: webpack.Configuration = {
+  mode: 'production',
   entry: './foo.js',
   output: {
     path: path.resolve(__dirname, 'dist'),
@@ -103,6 +104,7 @@ webpack = require('webpack')
 path = require('path')
 
 config =
+  mode: 'production'
   entry: './path/to/my/entry/file.js'
   output:
     path: path.resolve(__dirname, 'dist')
@@ -152,7 +154,7 @@ const CustomPlugin = config => ({
 });
 
 export default (
-  <webpack target="web" watch>
+  <webpack target="web" watch mode="production">
     <entry path="src/index.js" />
     <resolve>
       <alias {...{

src/content/configuration/configuration-types.md

@@ -24,6 +24,7 @@ One option is to export a function from your webpack config instead of exporting
 -module.exports = {
 +module.exports = function(env, argv) {
 +  return {
++    mode: env.production ? 'production' : 'development',
 +    devtool: env.production ? 'source-maps' : 'eval',
      plugins: [
        new webpack.optimize.UglifyJsPlugin({
@@ -64,11 +65,13 @@ module.exports = [{
     libraryTarget: 'amd'
   },
   entry: './app.js',
+  mode: 'production',
 }, {
   output: {
     filename: './dist-commonjs.js',
     libraryTarget: 'commonjs'
   },
   entry: './app.js',
+  mode: 'production',
 }]
 ```

src/content/configuration/index.md

@@ -29,6 +29,13 @@ __webpack.config.js__
 const path = require('path');
 
 module.exports = {
+  <details><summary>[mode](/concepts/mode): "production", // "production" | "development" | "none"</summary>
+  [mode](/concepts/mode): "production", // enable many optimizations for production builds
+  [mode](/concepts/mode): "development", // enabled useful tools for development
+  [mode](/concepts/mode): "none", // no defaults
+  </details>
+  // Chosen mode tells webpack to use its built-in optimizations accordingly.
+
   <details><summary>[entry](/configuration/entry-context#entry): "./app/entry", // string | object | array</summary>
   [entry](/configuration/entry-context#entry): ["./app/entry1", "./app/entry2"],
   [entry](/configuration/entry-context#entry): {

src/content/guides/getting-started.md

@@ -184,7 +184,7 @@ 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
+main.js  69.6 KiB       0  [emitted]  main
 Entrypoint main = main.js
    [1] (webpack)/buildin/module.js 519 bytes {0} [built]
    [2] (webpack)/buildin/global.js 509 bytes {0} [built]

src/content/guides/installation.md

@@ -28,6 +28,12 @@ npm install --save-dev webpack
 npm install --save-dev webpack@<version>
 ```
 
+If you're using webpack 4 or later, you'll also need to install the CLI.
+
+``` bash
+npm install --save-dev webpack-cli
+```
+
 Installing locally is what we recommend for most projects. This makes it easier to upgrade projects individually when breaking changes are introduced. Typically webpack is run via one or more [npm scripts](https://docs.npmjs.com/misc/scripts) which will look for a webpack installation in your local `node_modules` directory:
 
 ```json

src/content/index.md

@@ -6,7 +6,7 @@ title: webpack
 
 <div class="splash__wrap">
 <div class="splash__left">
-__app.js__
+__src/index.js__
 
 ```js
 import bar from './bar';
@@ -15,7 +15,7 @@ bar();
 ```
 </div>
 <div class="splash__right">
-__bar.js__
+__src/bar.js__
 
 ```js
 export default function bar() {
@@ -30,12 +30,15 @@ export default function bar() {
 
 <div class="splash__wrap">
 <div class="splash__left">
-__webpack.config.js__
+__[Without config](https://youtu.be/3Nv9muOkb6k?t=21293)__ or provide custom __webpack.config.js__
 
 ```js
+const path = require('path');
+
 module.exports = {
-  entry: './app.js',
+  entry: './src/index.js',
   output: {
+  	path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js'
   }
 };
@@ -52,7 +55,7 @@ __page.html__
   </head>
   <body>
     ...
-    <script src="bundle.js"></script>
+    <script src="dist/bundle.js"></script>
   </body>
 </html>
 ```