docs(Concepts): update concepts page for v4 (#1883)

This updates the Concepts page to facilitate webpack v4's options and changes.

src/content/concepts/index.md

@@ -9,13 +9,14 @@ contributors:
   - jimrfenner
   - TheDutchCoder
   - adambraimbridge
+  - EugeneHlushko
 ---
 
 At its core, *webpack* is a _static module bundler_ for modern JavaScript applications. When webpack processes your application, it recursively builds a _dependency graph_ that includes every module your application needs, then packages all of those modules into one or more _bundles_.
 
 T> Learn more about JavaScript modules and webpack modules [here](/concepts/modules).
 
-It is [incredibly configurable](/configuration), but to get started you only need to understand four **Core Concepts**:
+Since v4.0.0 webpack does not require a configuration file. Nevertheless, it is [incredibly configurable](/configuration). To get started you only need to understand four **Core Concepts**:
 
 - Entry
 - Output
@@ -31,7 +32,7 @@ An **entry point** indicates which module webpack should use to begin building o
 
 Every dependency is then processed and outputted into files called *bundles*, which we'll discuss more in the next section.
 
-You can specify an entry point (or multiple entry points) by configuring the `entry` property in the [webpack configuration](/configuration).
+You can specify an entry point (or multiple entry points) by configuring the `entry` property in the [webpack configuration](/configuration). It defaults to `./src`.
 
 Here's the simplest example of an `entry` configuration:
 
@@ -48,7 +49,7 @@ T> You can configure the `entry` property in various ways depending the needs of
 
 ## Output
 
-The **output** property tells webpack where to emit the *bundles* it creates and how to name these files. You can configure this part of the process by specifying an `output` field in your configuration:
+The **output** property tells webpack where to emit the *bundles* it creates and how to name these files and defaults to `./dist`. You can configure this part of the process by specifying an `output` field in your configuration:
 
 __webpack.config.js__
 
@@ -90,9 +91,7 @@ __webpack.config.js__
 const path = require('path');
 
 const config = {
-  entry: './path/to/my/entry/file.js',
   output: {
-    path: path.resolve(__dirname, 'dist'),
     filename: 'my-first-webpack.bundle.js'
   },
   module: {
@@ -127,14 +126,8 @@ In order to use a plugin, you need to `require()` it and add it to the `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: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'my-first-webpack.bundle.js'
-  },
   module: {
     rules: [
       { test: /\.txt$/, use: 'raw-loader' }
@@ -154,3 +147,16 @@ There are many plugins that webpack provides out of the box! Check out our [list
 Using plugins in your webpack config is straightforward - however, there are many use cases that are worth further exploration.
 
 [Learn more!](/concepts/plugins)
+
+
+## Mode
+
+By setting the `mode` parameter to either `development` or `production`, you can enable webpack's built-in optimizations that correspond with the selected mode.
+
+```javascript
+module.exports = {
+  mode: 'production'
+};
+```
+
+[Learn more!](/concepts/mode)

src/content/concepts/mode.md

@@ -0,0 +1,66 @@
+---
+title: Mode
+sort: 4
+contributors:
+  - EugeneHlushko
+---
+
+Providing the `mode` configuration option tells webpack to use its built-in optimizations accordingly.
+
+`string`
+
+## Usage
+
+Just provide the `mode` option in the config:
+
+```javascript
+module.exports = {
+  mode: 'production'
+};
+```
+
+
+or pass it as a cli argument:
+
+```bash
+webpack --mode=production
+```
+
+The following string values are supported:
+
+Option                | Description
+--------------------- | -----------------------
+`development`         | Provides `process.env.NODE_ENV` with value `development`. Enables `NamedModulesPlugin`.
+`production`          | Provides `process.env.NODE_ENV` with value `production`. Enables `UglifyJsPlugin`, `ModuleConcatenationPlugin` and `NoEmitOnErrorsPlugin`.
+
+
+### Mode: development
+
+
+```diff
+// webpack.production.config.js
+module.exports = {
++ mode: 'development'
+- plugins: [
+-   new webpack.NamedModulesPlugin(),
+-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
+- ]
+}
+```
+
+
+### Mode: production
+
+
+```diff
+// webpack.production.config.js
+module.exports = {
++  mode: 'production',
+-  plugins: [
+-    new UglifyJsPlugin(/* ... */),
+-    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
+-    new webpack.optimize.ModuleConcatenationPlugin(),
+-    new webpack.NoEmitOnErrorsPlugin()
+-  ]
+}
+```

src/content/guides/getting-started.md

@@ -77,6 +77,7 @@ We also need to adjust our `package.json` file in order to make sure we mark our
 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",