docs(): Merge the next branch (#1993)

* docs(guides) Fix error with filename + npm package. (#1886)

1) Webpack as default build to file main.js , not on bundle.js. 
2) Add npm install webpack-cli -D to npm install, If you do not do this console throw next: 
======================================================
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
======================================================
So pls fix this, thank`s.

* docs(guides): Added info for v4 and webpack-cli (#1888)

* docs(configuration) Update snippets to comply with webpack v4+ (#1905)

* docs(configuration) Update snippets to comply with webpack v4+

* Expand mode for more info

* fix(docs) Remove git conflict

Author: dhruvdutt

Diff for: .gitignore

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

Diff for: 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.

Diff for: 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'),

Diff for: 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 {...{

Diff for: 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',
 }]
 ```

Diff for: 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): {

Diff for: 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]

Diff for: 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

Diff for: 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>
 ```