Merge branch 'master' into issue/1933

Author: EugeneHlushko

.gitignore

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

src/content/api/cli.md

@@ -5,6 +5,7 @@ contributors:
   - ev1stensberg
   - simon04
   - tbroadley
+  - chenxsan
 related:
   - title: Analyzing Build Statistics
     url: https://survivejs.com/webpack/optimizing-build/analyzing-build-statistics/
@@ -37,7 +38,7 @@ See [configuration](/configuration) for the options in the configuration file.
 ## Usage without config file
 
 ```sh
-webpack <entry> [<entry>] <output>
+webpack <entry> [<entry>] -o <output>
 ```
 
 **`<entry>`**

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/configuration/stats.md

@@ -37,86 +37,122 @@ For more granular control, it is possible to specify exactly what information yo
 
 ``` js
 stats: {
+
   // fallback value for stats options when an option is not defined (has precedence over local webpack defaults)
   all: undefined,
+  
   // Add asset Information
   assets: true,
+  
   // Sort assets by a field
   // You can reverse the sort with `!field`.
   assetsSort: "field",
+  
   // Add build date and time information
   builtAt: true,
+  
   // Add information about cached (not built) modules
   cached: true,
+  
   // Show cached assets (setting this to `false` only shows emitted files)
   cachedAssets: true,
+  
   // Add children information
   children: true,
+  
   // Add chunk information (setting this to `false` allows for a less verbose output)
   chunks: true,
+  
   // Add built modules information to chunk information
   chunkModules: true,
+  
   // Add the origins of chunks and chunk merging info
   chunkOrigins: true,
+  
   // Sort the chunks by a field
   // You can reverse the sort with `!field`. Default is `id`.
   chunksSort: "field",
+  
   // Context directory for request shortening
   context: "../src/",
+  
   // `webpack --colors` equivalent
   colors: false,
+  
   // Display the distance from the entry point for each module
   depth: false,
+  
   // Display the entry points with the corresponding bundles
   entrypoints: false,
+  
   // Add --env information
   env: false,
+  
   // Add errors
   errors: true,
+  
   // Add details to errors (like resolving log)
   errorDetails: true,
+  
   // Exclude assets from being displayed in stats
   // This can be done with a String, a RegExp, a Function getting the assets name
   // and returning a boolean or an Array of the above.
   excludeAssets: "filter" | /filter/ | (assetName) => ... return true|false |
     ["filter"] | [/filter/] | [(assetName) => ... return true|false],
+    
   // Exclude modules from being displayed in stats
   // This can be done with a String, a RegExp, a Function getting the modules source
   // and returning a boolean or an Array of the above.
   excludeModules: "filter" | /filter/ | (moduleSource) => ... return true|false |
     ["filter"] | [/filter/] | [(moduleSource) => ... return true|false],
+    
   // See excludeModules
   exclude: "filter" | /filter/ | (moduleSource) => ... return true|false |
     ["filter"] | [/filter/] | [(moduleSource) => ... return true|false],
+    
   // Add the hash of the compilation
   hash: true,
+  
   // Set the maximum number of modules to be shown
   maxModules: 15,
+  
   // Add built modules information
   modules: true,
+  
   // Sort the modules by a field
   // You can reverse the sort with `!field`. Default is `id`.
   modulesSort: "field",
+  
   // Show dependencies and origin of warnings/errors (since webpack 2.5.0)
   moduleTrace: true,
+  
   // Show performance hint when file size exceeds `performance.maxAssetSize`
   performance: true,
+  
   // Show the exports of the modules
   providedExports: false,
+  
   // Add public path information
   publicPath: true,
+  
   // Add information about the reasons why modules are included
   reasons: true,
+  
   // Add the source code of modules
   source: true,
+  
   // Add timing information
   timings: true,
+  
   // Show which exports of a module are used
   usedExports: false,
+  
   // Add webpack version information
   version: true,
+  
   // Add warnings
   warnings: true,
+  
   // Filter warnings to be shown (since webpack 2.4.0),
   // can be a String, Regexp, a function getting the warning and returning a boolean
   // or an Array of a combination of the above. First match wins.

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>
 ```