diff --git a/src/content/concepts/configuration.md b/src/content/concepts/configuration.md
index 6bcb1f46cdf3..e2d4828f7bbe 100644
--- a/src/content/concepts/configuration.md
+++ b/src/content/concepts/configuration.md
@@ -28,7 +28,7 @@ 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**
 
@@ -36,6 +36,7 @@ The following examples below describe how webpack's configuration object can be
 var path = require('path');
 
 module.exports = {
+  mode: 'development',
   entry: './foo.js',
   output: {
     path: path.resolve(__dirname, 'dist'),
diff --git a/src/content/configuration/configuration-languages.md b/src/content/configuration/configuration-languages.md
index a3ac2379200f..e0589ae82966 100644
--- a/src/content/configuration/configuration-languages.md
+++ b/src/content/configuration/configuration-languages.md
@@ -30,6 +30,7 @@ import * as webpack from 'webpack';
 import * as path from 'path';
 
 const config: webpack.Configuration = {
+  mode: 'production',
   entry: './foo.js',
   output: {
     path: path.resolve(__dirname, 'dist'),
@@ -101,6 +102,7 @@ webpack = require('webpack')
 path = require('path')
 
 config =
+  mode: 'production'
   entry: './path/to/my/entry/file.js'
   output:
     path: path.resolve(__dirname, 'dist')
@@ -150,7 +152,7 @@ const CustomPlugin = config => ({
 });
 
 export default (
-  <webpack target="web" watch>
+  <webpack target="web" watch mode="production">
     <entry path="src/index.js" />
     <resolve>
       <alias {...{
diff --git a/src/content/configuration/configuration-types.md b/src/content/configuration/configuration-types.md
index de51fd1e8aaf..7e7882b7fddd 100644
--- a/src/content/configuration/configuration-types.md
+++ b/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 --git a/src/content/configuration/index.md b/src/content/configuration/index.md
index 4817985f4c5b..bad32c626a2c 100644
--- a/src/content/configuration/index.md
+++ b/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): {