diff --git a/src/content/configuration/dev-server.mdx b/src/content/configuration/dev-server.mdx
index 44f6460523c1..7bde56012d5f 100644
--- a/src/content/configuration/dev-server.mdx
+++ b/src/content/configuration/dev-server.mdx
@@ -26,13 +26,11 @@ contributors:
 
 This page describes the options that affect the behavior of webpack-dev-server (short: dev-server).
 
-T> Options that are compatible with [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) have 🔑 next to them.
-
 ## `devServer`
 
 `object`
 
-This set of options is picked up by [webpack-dev-server](https://github.com/webpack/webpack-dev-server) and can be used to change its behavior in various ways. Here's a rudimentary example that gzips and serves everything from our `dist/` directory in the project root:
+This set of options is picked up by [webpack-dev-server](https://github.com/webpack/webpack-dev-server) and can be used to change its behavior in various ways. Here's a rudimentary example that gzips and serves everything from our `public/` directory in the project root:
 
 **webpack.config.js**
 
@@ -42,7 +40,9 @@ var path = require('path');
 module.exports = {
   //...
   devServer: {
-    contentBase: path.join(__dirname, 'dist'),
+    static: {
+      directory: path.join(__dirname, 'public'),
+    },
     compress: true,
     port: 9000,
   },
@@ -52,14 +52,16 @@ module.exports = {
 When the server is started, there will be a message prior to the list of resolved modules:
 
 ```bash
-http://localhost:9000/
-webpack output is served from /build/
-Content not from webpack is served from /path/to/dist/
+<i> [webpack-dev-server] Project is running at:
+<i> [webpack-dev-server] Loopback: http://localhost:9000/
+<i> [webpack-dev-server] On Your Network (IPv4): http://197.158.164.104:9000/
+<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:9000/
+<i> [webpack-dev-server] Content not from webpack is served from '/path/to/public' directory
 ```
 
 that will give some background on where the server is located and what it's serving.
 
-If you're using dev-server through the Node.js API, the options in `devServer` will be ignored. Pass the options as a second parameter instead: `new WebpackDevServer(compiler, {...})`. [See here](https://github.com/webpack/webpack-dev-server/tree/master/examples/api/simple) for an example of how to use webpack-dev-server through the Node.js API.
+If you're using dev-server through the Node.js API, the options in `devServer` will be ignored. Pass the options as the first parameter instead: `new WebpackDevServer({...}, compiler)`. [See here](https://github.com/webpack/webpack-dev-server/tree/master/examples/api/simple) for an example of how to use webpack-dev-server through the Node.js API.
 
 W> You cannot use the second `compiler` argument (a callback) when using `WebpackDevServer`.
 
@@ -81,29 +83,9 @@ npx webpack serve
 
 A list of CLI options for `serve` is available [here](https://github.com/webpack/webpack-cli/blob/master/SERVE-OPTIONS-v3.md)
 
-## `devServer.after`
-
-`function (app, server, compiler)`
-
-Provides the ability to execute custom middleware after all other middleware
-internally within the server.
-
-**webpack.config.js**
-
-```javascript
-module.exports = {
-  //...
-  devServer: {
-    after: function (app, server, compiler) {
-      // do fancy stuff
-    },
-  },
-};
-```
-
 ## `devServer.allowedHosts`
 
-`[string]`
+`'auto' | 'all'` `[string]`
 
 This option allows you to whitelist services that are allowed to access the dev server.
 
@@ -139,19 +121,7 @@ module.exports = {
 };
 ```
 
-To use this option with the CLI pass the `--allowed-hosts` as following:
-
-```bash
-npx webpack serve --entry ./entry/file --output-path ./output/path --allowed-hosts .host.com --allowed-hosts host2.com
-```
-
-## `devServer.before`
-
-`function (app, server, compiler)`
-
-Provides the ability to execute custom middleware prior to all other middleware
-internally within the server. This could be used to define custom handlers, for
-example:
+When set to `'all'` this option bypasses host checking. **THIS IS NOT RECOMMENDED** as apps that do not check the host are vulnerable to DNS rebinding attacks.
 
 **webpack.config.js**
 
@@ -159,20 +129,22 @@ example:
 module.exports = {
   //...
   devServer: {
-    before: function (app, server, compiler) {
-      app.get('/some/path', function (req, res) {
-        res.json({ custom: 'response' });
-      });
-    },
+    allowedHosts: 'all',
   },
 };
 ```
 
+To use this option with the CLI pass the `--allowed-hosts` as following:
+
+```bash
+npx webpack serve --entry ./entry/file --output-path ./output/path --allowed-hosts .host.com --allowed-hosts host2.com
+```
+
 ## `devServer.bonjour`
 
-`boolean = false`
+`boolean` `object`
 
-This option broadcasts the server via [ZeroConf](http://www.zeroconf.org/) networking on start
+This option broadcasts the server via [ZeroConf](http://www.zeroconf.org/) networking on start.
 
 **webpack.config.js**
 
@@ -185,21 +157,13 @@ module.exports = {
 };
 ```
 
-Usage via the CLI
+Usage via the CLI:
 
 ```bash
 npx webpack serve --bonjour
 ```
 
-## `devServer.clientLogLevel`
-
-`string = 'info': 'silent' | 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'none' | 'warning'`
-
-W> `silent`, `trace`, `debug`, and `warning` are going to be deprecated at the next major version.
-
-When using _inline mode_, the console in your DevTools will show you messages e.g. before reloading, before an error or when [Hot Module Replacement](/concepts/hot-module-replacement/) is enabled.
-
-`devServer.clientLogLevel` may be too verbose, you can turn logging off by setting it to `'silent'`.
+You can also pass [custom options](https://github.com/watson/bonjour#initializing) to bonjour, for example:
 
 **webpack.config.js**
 
@@ -207,22 +171,21 @@ When using _inline mode_, the console in your DevTools will show you messages e.
 module.exports = {
   //...
   devServer: {
-    clientLogLevel: 'silent',
+    bonjour: {
+      type: 'http',
+      protocol: 'udp',
+    },
   },
 };
 ```
 
-Usage via the CLI
-
-```bash
-npx webpack serve --client-log-level silent
-```
+## `devServer.client`
 
-## `devServer.compress`
+### `logging`
 
-`boolean`
+`'log' | 'info' | 'warn' | 'error' | 'none' | 'verbose'`
 
-Enable [gzip compression](https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/) for everything served:
+Allows to set log level in the browser, e.g. before reloading, before an error or when [Hot Module Replacement](/concepts/hot-module-replacement/) is enabled.
 
 **webpack.config.js**
 
@@ -230,103 +193,71 @@ Enable [gzip compression](https://betterexplained.com/articles/how-to-optimize-y
 module.exports = {
   //...
   devServer: {
-    compress: true,
+    client: {
+      logging: 'info',
+    },
   },
 };
 ```
 
-Usage via the CLI
+Usage via the CLI:
 
 ```bash
-npx webpack serve --compress
+npx webpack serve --client-logging info
 ```
 
-## `devServer.contentBase`
+### `overlay`
 
-`boolean: false` `string` `[string]` `number`
+`boolean = true` `object: { errors boolean = true, warnings boolean = true }`
 
-Tell the server where to serve content from. This is only necessary if you want to serve static files. [`devServer.publicPath`](#devserverpublicpath-) will be used to determine where the bundles should be served from, and takes precedence.
-
-T> It is recommended to use an absolute path.
-
-By default, it will use your current working directory to serve content. To disable `contentBase` set it to `false`.
+Shows a full-screen overlay in the browser when there are compiler errors or warnings.
 
 **webpack.config.js**
 
 ```javascript
-const path = require('path');
-
 module.exports = {
   //...
   devServer: {
-    contentBase: path.join(__dirname, 'public'),
-  },
-};
-```
-
-It is also possible to serve from multiple directories in case you want to serve static content at multiple URLs with [`contentBasePublicPath`](#devservercontentbasepublicpath):
-
-**webpack.config.js**
-
-```javascript
-const path = require('path');
-
-module.exports = {
-  //...
-  devServer: {
-    contentBase: [
-      path.join(__dirname, 'public'),
-      path.join(__dirname, 'assets'),
-    ],
+    client: {
+      overlay: true,
+    },
   },
 };
 ```
 
-Usage via the CLI
+Usage via the CLI:
 
 ```bash
-npx webpack serve --content-base ./path/to/content/dir
+npx webpack serve --client-overlay
 ```
 
-## `devServer.contentBasePublicPath`
-
-`string = '/'` `[string]`
-
-Tell the server at what URL to serve `devServer.contentBase` static content. If there was a file `assets/manifest.json`, it would be served at `/serve-content-base-at-this-url/manifest.json`
+If you want to show only errors:
 
 **webpack.config.js**
 
 ```javascript
-const path = require('path');
-
 module.exports = {
   //...
   devServer: {
-    contentBase: path.join(__dirname, 'assets'),
-    contentBasePublicPath: '/serve-content-base-at-this-url',
+    client: {
+      overlay: {
+        errors: true,
+        warnings: false,
+      },
+    },
   },
 };
 ```
 
-Provide an array of strings in case you have multiple static folders set in [`contentBase`](#devservercontentbase).
-
-**webpack.config.js**
+Usage via the CLI:
 
-```javascript
-module.exports = {
-  //...
-  devServer: {
-    contentBase: [contentBasePublic, contentBaseOther],
-    contentBasePublicPath: [contentBasePublicPath, contentBasePublicOtherPath],
-  },
-};
+```bash
+npx webpack serve --client-overlay-errors --no-client-overlay-warnings
 ```
 
-## `devServer.disableHostCheck`
-
-`boolean`
+### `progress`
 
-When set to `true` this option bypasses host checking. **THIS IS NOT RECOMMENDED** as apps that do not check the host are vulnerable to DNS rebinding attacks.
+Prints compilation progress in percentage in the browser.
 
 **webpack.config.js**
 
@@ -334,50 +265,52 @@ When set to `true` this option bypasses host checking. **THIS IS NOT RECOMMENDED
 module.exports = {
   //...
   devServer: {
-    disableHostCheck: true,
+    client: {
+      progress: true,
+    },
   },
 };
 ```
 
-Usage via the CLI
+Usage via the CLI:
 
 ```bash
-npx webpack serve --disable-host-check
+npx webpack serve --client-progress
 ```
 
-## `devServer.filename` 🔑
+### webSocketTransport
 
-`string`
+`'ws' | 'sockjs'` `string`
 
-This option lets you reduce the compilations in [lazy mode](#devserverlazy-).
-By default in [lazy mode](#devserverlazy-), every request results in a new compilation. With `filename`, it's possible to only compile when a certain file is requested.
+This option allows us either to choose the current `devServer` transport mode for client individually or to provide custom client implementation. This allows to specify how browser or other client communicates with the `devServer`.
 
-If [`output.filename`](/configuration/output/#outputfilename) is set to `'bundle.js'` and `devServer.filename` is used like this:
+T> Providing `'ws'` or `'sockjs'` to [`webSocketServer`](#devserverwebsocketserver) is a shortcut to setting both `devServer.client.webSocketTransport` and `devServer.webSocketServer` to the given value.
 
 **webpack.config.js**
 
 ```javascript
 module.exports = {
   //...
-  output: {
-    filename: 'bundle.js',
-  },
   devServer: {
-    lazy: true,
-    filename: 'bundle.js',
+    client: {
+      webSocketTransport: 'ws',
+    },
+    webSocketServer: 'ws',
   },
 };
 ```
 
-It will now only compile the bundle when `/bundle.js` is requested.
+Usage via the CLI:
 
-T> `filename` has no effect when used without [lazy mode](#devserverlazy-).
+```bash
+npx webpack serve --client-web-socket-transport ws --web-socket-server ws
+```
 
-## `devServer.headers` 🔑
+T> When providing a custom client and server implementation make sure that they are compatible with one another to communicate successfully.
 
-`object`
+To create a custom client implementation, create a class that extends [`BaseClient`](https://github.com/webpack/webpack-dev-server/blob/master/client-src/clients/BaseClient.js).
 
-Adds headers to all responses:
+Using path to `CustomClient.js`, a custom WebSocket client implementation, along with the compatible `'ws'` server:
 
 **webpack.config.js**
 
@@ -385,18 +318,15 @@ Adds headers to all responses:
 module.exports = {
   //...
   devServer: {
-    headers: {
-      'X-Custom-Foo': 'bar',
+    client: {
+      webSocketTransport: require.resolve('./CustomClient'),
     },
+    webSocketServer: 'ws',
   },
 };
 ```
 
-## `devServer.historyApiFallback`
-
-`boolean = false` `object`
-
-When using the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History), the `index.html` page will likely have to be served in place of any `404` responses. Enable `devServer.historyApiFallback` by setting it to `true`:
+Using custom, compatible WebSocket client and server implementations:
 
 **webpack.config.js**
 
@@ -404,31 +334,19 @@ When using the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/
 module.exports = {
   //...
   devServer: {
-    historyApiFallback: true,
+    client: {
+      webSocketTransport: require.resolve('./CustomClient'),
+    },
+    webSocketServer: require.resolve('./CustomServer'),
   },
 };
 ```
 
-By passing an object this behavior can be controlled further using options like `rewrites`:
+### webSocketURL
 
-**webpack.config.js**
+`string` `object`
 
-```javascript
-module.exports = {
-  //...
-  devServer: {
-    historyApiFallback: {
-      rewrites: [
-        { from: /^\/$/, to: '/views/landing.html' },
-        { from: /^\/subpage/, to: '/views/subpage.html' },
-        { from: /./, to: '/views/404.html' },
-      ],
-    },
-  },
-};
-```
-
-When using dots in your path (common with Angular), you may need to use the `disableDotRule`:
+This option allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
 
 **webpack.config.js**
 
@@ -436,26 +354,27 @@ When using dots in your path (common with Angular), you may need to use the `dis
 module.exports = {
   //...
   devServer: {
-    historyApiFallback: {
-      disableDotRule: true,
+    client: {
+      webSocketURL: 'ws://0.0.0.0:8080/ws',
     },
   },
 };
 ```
 
-Usage via the CLI
+Usage via the CLI:
 
 ```bash
-npx webpack serve --history-api-fallback
+npx webpack serve --client-web-socket-url ws://0.0.0.0:8080/ws
 ```
 
-For more options and information, see the [connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback) documentation.
-
-## `devServer.host`
-
-`string = 'localhost'`
+You can also specify an object with the following properties:
 
-Specify a host to use. If you want your server to be accessible externally, specify it like this:
+- `hostname`: Tells clients connected to devServer to use the provided hostname.
+- `pathname`: Tells clients connected to devServer to use the provided path to connect.
+- `password`: Tells clients connected to devServer to use the provided password to authenticate.
+- `port`: Tells clients connected to devServer to use the provided port.
+- `protocol`: Tells clients connected to devServer to use the provided protocol.
+- `username`: Tells clients connected to devServer to use the provided username to authenticate.
 
 **webpack.config.js**
 
@@ -463,22 +382,27 @@ Specify a host to use. If you want your server to be accessible externally, spec
 module.exports = {
   //...
   devServer: {
-    host: '0.0.0.0',
+    client: {
+      webSocketURL: {
+        hostname: '0.0.0.0',
+        pathname: '/ws',
+        password: 'dev-server',
+        port: 8080,
+        protocol: 'ws',
+        username: 'webpack',
+      },
+    },
   },
 };
 ```
 
-Usage via the CLI
-
-```bash
-npx webpack serve --host 0.0.0.0
-```
+T> To get `protocol`/`hostname`/`port` from browser use `webSocketURL: 'auto://0.0.0.0:0/ws'`.
 
-## `devServer.hot`
+## `devServer.compress`
 
-`boolean`
+`boolean = true`
 
-Enable webpack's [Hot Module Replacement](/concepts/hot-module-replacement/) feature:
+Enable [gzip compression](https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/) for everything served:
 
 **webpack.config.js**
 
@@ -486,43 +410,40 @@ Enable webpack's [Hot Module Replacement](/concepts/hot-module-replacement/) fea
 module.exports = {
   //...
   devServer: {
-    hot: true,
+    compress: true,
   },
 };
 ```
 
-T> Note that [`webpack.HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin/) is required to fully enable HMR. If `webpack` or `webpack-dev-server` are launched with the `--hot` option, this plugin will be added automatically, so you may not need to add this to your `webpack.config.js`. See the [HMR concepts page](/concepts/hot-module-replacement/) for more information.
+Usage via the CLI:
 
-## `devServer.hotOnly`
+```bash
+npx webpack serve --compress
+```
 
-`boolean`
+## devserver.devMiddleware
 
-Enables Hot Module Replacement (see [`devServer.hot`](#devserverhot)) without page refresh as a fallback in case of build failures.
+Provide options to [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) which handles webpack assets.
 
 **webpack.config.js**
 
 ```javascript
 module.exports = {
-  //...
   devServer: {
-    hotOnly: true,
+    index: true,
+    mimeTypes: { 'text/html': ['phtml'] },
+    publicPath: '/publicPathForDevServe',
+    serverSideRender: true,
+    writeToDisk: true,
   },
 };
 ```
 
-Usage via the CLI
-
-```bash
-npx webpack serve --hot-only
-```
-
 ## `devServer.http2`
 
-`boolean = false`
-
-Serve over HTTP/2 using [spdy](https://www.npmjs.com/package/spdy). This option is ignored for Node 10.0.0 and above, as spdy is broken for those versions. The dev server will migrate over to Node's built-in HTTP/2 once [Express](https://expressjs.com/) supports it.
+`boolean`
 
-If `devServer.http2` is not explicitly set to `false`, it will default to `true` when [`devServer.https`](#devserverhttps) is enabled. When `devServer.http2` is enabled but the server is unable to serve over HTTP/2, the server defaults to HTTPS.
+Serve over HTTP/2 using [spdy](https://www.npmjs.com/package/spdy). This option is ignored for Node 15.0.0 and above, as spdy is broken for those versions. The dev server will migrate over to Node's built-in HTTP/2 once [Express](https://expressjs.com/) supports it.
 
 HTTP/2 with a self-signed certificate:
 
@@ -549,7 +470,7 @@ module.exports = {
     https: {
       key: fs.readFileSync('/path/to/server.key'),
       cert: fs.readFileSync('/path/to/server.crt'),
-      ca: fs.readFileSync('/path/to/ca.pem'),
+      cacert: fs.readFileSync('/path/to/ca.pem'),
     },
   },
 };
@@ -564,14 +485,14 @@ npx webpack serve --http2
 To pass your own certificate via CLI, use the following options
 
 ```bash
-npx webpack serve --http2 --key ./path/to/server.key --cert ./path/to/server.crt --cacert ./path/to/ca.pem
+npx webpack serve --http2 --https-key ./path/to/server.key --https-cert ./path/to/server.crt --https-cacert ./path/to/ca.pem
 ```
 
 ## `devServer.https`
 
 `boolean` `object`
 
-By default, dev-server will be served over HTTP. It can optionally be served over HTTP/2 with HTTPS:
+By default, dev-server will be served over `HTTP`. It can optionally be served over `HTTP/2` with `HTTPS`:
 
 **webpack.config.js**
 
@@ -590,12 +511,14 @@ With the above setting, a self-signed certificate is used, but you can provide y
 
 ```javascript
 module.exports = {
-  //...
   devServer: {
     https: {
-      key: fs.readFileSync('/path/to/server.key'),
-      cert: fs.readFileSync('/path/to/server.crt'),
-      ca: fs.readFileSync('/path/to/ca.pem'),
+      cacert: './server.pem',
+      pfx: './server.pfx',
+      key: './server.key',
+      cert: './server.crt',
+      passphrase: 'webpack-dev-server',
+      requestCert: true,
     },
   },
 };
@@ -603,7 +526,7 @@ module.exports = {
 
 This object is passed straight to Node.js HTTPS module, so see the [HTTPS documentation](https://nodejs.org/api/https.html) for more information.
 
-Usage via the CLI
+Usage via the CLI:
 
 ```bash
 npx webpack serve --https
@@ -612,14 +535,14 @@ npx webpack serve --https
 To pass your own certificate via the CLI use the following options
 
 ```bash
-npx webpack serve --https --key ./path/to/server.key --cert ./path/to/server.crt --cacert ./path/to/ca.pem
+npx webpack serve --https-key ./path/to/server.key --https--cert ./path/to/server.crt --https-cacert ./path/to/ca.pem
 ```
 
-## `devServer.index`
+## `devServer.headers`
 
-`string`
+`function` `object`
 
-The filename that is considered the index file.
+Adds headers to all responses:
 
 **webpack.config.js**
 
@@ -627,51 +550,50 @@ The filename that is considered the index file.
 module.exports = {
   //...
   devServer: {
-    index: 'index.html',
+    headers: {
+      'X-Custom-Foo': 'bar',
+    },
   },
 };
 ```
 
-## `devServer.injectClient`
+## devServer.historyApiFallback
 
-`boolean = false` `function (compilerConfig) => boolean`
+`boolean` `object`
 
-Tells `devServer` to inject a client. Setting `devServer.injectClient` to `true` will result in always injecting a client. It is possible to provide a function to inject conditionally:
+When using the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History), the `index.html` page will likely have to be served in place of any `404` responses. Enable `devServer.historyApiFallback` by setting it to `true`:
+
+**webpack.config.js**
 
 ```javascript
 module.exports = {
   //...
   devServer: {
-    injectClient: (compilerConfig) => compilerConfig.name === 'only-include',
+    historyApiFallback: true,
   },
 };
 ```
 
-## `devServer.injectHot`
-
-`boolean = false` `function (compilerConfig) => boolean`
+By passing an object this behavior can be controlled further using options like `rewrites`:
 
-Tells `devServer` to inject a Hot Module Replacement. Setting `devServer.injectHot` to `true` will result in always injecting. It is possible to provide a function to inject conditionally:
+**webpack.config.js**
 
 ```javascript
 module.exports = {
   //...
   devServer: {
-    hot: true,
-    injectHot: (compilerConfig) => compilerConfig.name === 'only-include',
+    historyApiFallback: {
+      rewrites: [
+        { from: /^\/$/, to: '/views/landing.html' },
+        { from: /^\/subpage/, to: '/views/subpage.html' },
+        { from: /./, to: '/views/404.html' },
+      ],
+    },
   },
 };
 ```
 
-W> Make sure that [`devServer.hot`](#devserverhot) is set to `true` because `devServer.injectHot` only works with HMR.
-
-## `devServer.inline`
-
-`boolean`
-
-Toggle between the dev-server's two different modes. By default, the application will be served with _inline mode_ enabled. This means that a script will be inserted in your bundle to take care of live reloading, and build messages will appear in the browser console.
-
-It is also possible to use **iframe mode**, which uses an `<iframe>` under a notification bar with messages about the build. To switch to **iframe mode**:
+When using dots in your path (common with Angular), you may need to use the `disableDotRule`:
 
 **webpack.config.js**
 
@@ -679,26 +601,26 @@ It is also possible to use **iframe mode**, which uses an `<iframe>` under a not
 module.exports = {
   //...
   devServer: {
-    inline: false,
+    historyApiFallback: {
+      disableDotRule: true,
+    },
   },
 };
 ```
 
-Usage via the CLI
+Usage via the CLI:
 
 ```bash
-npx webpack serve --inline
+npx webpack serve --history-api-fallback
 ```
 
-Notice that there's no way to disable it from CLI.
-
-T> Inline mode is recommended for [Hot Module Replacement](/plugins/hot-module-replacement-plugin/) as it includes an HMR trigger from the websocket. Polling mode can be used as an alternative, but requires an additional entry point, `'webpack/hot/poll?1000'`.
+For more options and information, see the [connect-history-api-fallback](https://github.com/bripkens/connect-history-api-fallback) documentation.
 
-## `devServer.lazy` 🔑
+## devServer.host
 
-`boolean`
+`'local-ip' | 'local-ipv4' | 'local-ipv6'` `string`
 
-When `devServer.lazy` is enabled, the dev-server will only compile the bundle when it gets requested. This means that webpack will not watch any file changes. We call this **lazy mode**.
+Specify a host to use. If you want your server to be accessible externally, specify it like this:
 
 **webpack.config.js**
 
@@ -706,26 +628,52 @@ When `devServer.lazy` is enabled, the dev-server will only compile the bundle wh
 module.exports = {
   //...
   devServer: {
-    lazy: true,
+    host: '0.0.0.0',
   },
 };
 ```
 
-Usage via the CLI
+Usage via the CLI:
+
+```bash
+npx webpack serve --host 0.0.0.0
+```
+
+This also works with IPv6:
 
 ```bash
-npx webpack serve --lazy
+npx webpack serve --host ::
 ```
 
-T> [`watchOptions`](#devserverwatchoptions-) will have no effect when used with **lazy mode**.
+### local-ip
+
+Specifying `local-ip` as host will try to resolve the host option as your local `IPv4` address if available, if `IPv4` is not available it will try to resolve your local `IPv6` address.
+
+```bash
+npx webpack serve --host local-ip
+```
 
-T> If you use the CLI, make sure **inline mode** is disabled.
+### local-ipv4
 
-## `devServer.liveReload`
+Specifying `local-ipv4` as host will try to resolve the host option as your local `IPv4` address.
 
-`boolean = true`
+```bash
+npx webpack serve --host local-ipv4
+```
+
+### local-ipv6
+
+Specifying local-ipv6 as host will try to resolve the host option as your local IPv6 address.
+
+```bash
+npx webpack serve --host local-ipv6
+```
+
+## `devServer.hot`
 
-By default, the dev-server will reload/refresh the page when file changes are detected. [`devServer.hot`](#devserverhot) option must be disabled or [`devServer.watchContentBase`](#devserverwatchcontentbase) option must be enabled in order for `liveReload` to take effect. Disable `devServer.liveReload` by setting it to `false`:
+`'only'` `boolean`
+
+Enable webpack's [Hot Module Replacement](/concepts/hot-module-replacement/) feature:
 
 **webpack.config.js**
 
@@ -733,28 +681,18 @@ By default, the dev-server will reload/refresh the page when file changes are de
 module.exports = {
   //...
   devServer: {
-    liveReload: false,
+    hot: true,
   },
 };
 ```
 
-Usage via the CLI
+Usage via the CLI:
 
 ```bash
-npx webpack serve --liveReload
+npx webpack serve --hot
 ```
 
-Notice that there's no way to disable it from CLI.
-
-W> Live reloading works only with web related [targets](/configuration/target/#string) like `web`, `webworker`, `electron-renderer` and `node-webkit`.
-
-## `devServer.mimeTypes` 🔑
-
-`object`
-
-Allows dev-server to register custom mime types.
-The object is passed to the underlying `webpack-dev-middleware`.
-See [documentation](https://github.com/webpack/webpack-dev-middleware#mimetypes) for usage notes.
+To enable Hot Module Replacement without page refresh as a fallback in case of build failures, use `hot: 'only'`:
 
 **webpack.config.js**
 
@@ -762,16 +700,26 @@ See [documentation](https://github.com/webpack/webpack-dev-middleware#mimetypes)
 module.exports = {
   //...
   devServer: {
-    mimeTypes: { 'text/html': ['phtml'] },
+    hot: 'only',
   },
 };
 ```
 
-## `devServer.noInfo` 🔑
+Usage via the CLI:
+
+```bash
+npx webpack serve --hot only
+```
+
+T> Note that [`webpack.HotModuleReplacementPlugin`](/plugins/hot-module-replacement-plugin/) is required to fully enable HMR. If `webpack` or `webpack-dev-server` are launched with the `--hot` option, this plugin will be added automatically, so you may not need to add this to your `webpack.config.js`. See the [HMR concepts page](/concepts/hot-module-replacement/) for more information.
 
-`boolean = false`
+## devServer.ipc
 
-Tells dev-server to suppress messages like the webpack bundle information. Errors and warnings will still be shown.
+`true` `string`
+
+The Unix socket to listen to (instead of a [`host`](#devserverhost)).
+
+Setting it to `true` will listen to a socket at `/your-os-temp-dir/webpack-dev-server.sock`:
 
 **webpack.config.js**
 
@@ -779,36 +727,37 @@ Tells dev-server to suppress messages like the webpack bundle information. Error
 module.exports = {
   //...
   devServer: {
-    noInfo: true,
+    ipc: true,
   },
 };
 ```
 
-## `devServer.onListening`
+Usage via the CLI:
 
-`function (server)`
+```bash
+npx webpack serve --ipc
+```
 
-Provides an option to execute a custom function when `webpack-dev-server` starts listening for connections on a port.
+You can also listen to a different socket with:
 
 **webpack.config.js**
 
 ```javascript
+const path = require('path');
+
 module.exports = {
   //...
   devServer: {
-    onListening: function (server) {
-      const port = server.listeningApp.address().port;
-      console.log('Listening on port:', port);
-    },
+    ipc: path.join(__dirname, 'my-socket.sock'),
   },
 };
 ```
 
-## `devServer.open`
+## devServer.liveReload
 
-`boolean = false` `string` `object`
+`boolean = true`
 
-Tells dev-server to open the browser after server had been started. Set it to `true` to open your default browser.
+By default, the dev-server will reload/refresh the page when file changes are detected. [`devServer.hot`](#devserverhot) option must be disabled or [`devServer.watchFiles`](#devserverwatchfiles) option must be enabled in order for `liveReload` to take effect. Disable `devServer.liveReload` by setting it to `false`:
 
 **webpack.config.js**
 
@@ -816,12 +765,31 @@ Tells dev-server to open the browser after server had been started. Set it to `t
 module.exports = {
   //...
   devServer: {
-    open: true,
+    liveReload: false,
   },
 };
 ```
 
-Provide browser name to use instead of the default one:
+Usage via the CLI:
+
+```bash
+npx webpack serve --live-reload
+```
+
+To disable:
+
+```bash
+npx webpack serve --no-live-reload
+```
+
+W> Live reloading works only with web related [targets](/configuration/target/#string) like `web`, `webworker`, `electron-renderer` and `node-webkit`.
+
+## devServer.onAfterSetupMiddleware
+
+`function (app, server, compiler)`
+
+Provides the ability to execute custom middleware after all other middleware
+internally within the server.
 
 **webpack.config.js**
 
@@ -829,12 +797,22 @@ Provide browser name to use instead of the default one:
 module.exports = {
   //...
   devServer: {
-    open: 'Google Chrome',
+    onAfterSetupMiddleware: function (devServer) {
+      devServer.app.get('/some/path', function (req, res) {
+        res.json({ custom: 'response' });
+      });
+    },
   },
 };
 ```
 
-If you want to use flags when opening the browser like opening an incognito window (`--incognito` flag), you can set `open` to an object. The object accepts all [open](https://www.npmjs.com/package/open) options, `app` property must be an array. The first element in the array must be the browser name and the other following elements are the flags you want to use. For example:
+## devServer.onBeforeSetupMiddleware
+
+`function (app, server, compiler)`
+
+Provides the ability to execute custom middleware prior to all other middleware
+internally within the server. This could be used to define custom handlers, for
+example:
 
 **webpack.config.js**
 
@@ -842,26 +820,20 @@ If you want to use flags when opening the browser like opening an incognito wind
 module.exports = {
   //...
   devServer: {
-    open: {
-      app: ['Google Chrome', '--incognito', '--other-flag'],
+    onBeforeSetupMiddleware: function (app, server, compiler) {
+      app.get('/some/path', function (req, res) {
+        res.json({ custom: 'response' });
+      });
     },
   },
 };
 ```
 
-Usage via the CLI
-
-```bash
-npx webpack serve --open 'Google Chrome'
-```
-
-T> The browser application name is platform dependent. Don't hard code it in reusable modules. For example, `'Chrome'` is `'Google Chrome'` on macOS, `'google-chrome'` on Linux and `'chrome'` on Windows.
-
-## `devServer.openPage`
+## devServer.open
 
-`string` `[string]`
+`boolean` `string` `[string]` `object` `[object]`
 
-Specify a page to navigate to when opening the browser.
+Tells dev-server to open the browser after server had been started. Set it to `true` to open your default browser.
 
 **webpack.config.js**
 
@@ -870,20 +842,17 @@ module.exports = {
   //...
   devServer: {
     open: true,
-    openPage: 'different/page',
   },
 };
 ```
 
-Usage via the CLI
+Usage via the CLI:
 
 ```bash
-npx webpack serve --open --open-page different/page
+npx webpack serve --open
 ```
 
-W> Do not prepend `/` for the page as webpack-dev-server will do it automatically, otherwise the browser will open urls like `http://localhost:8080//different/page`.
-
-If you wish to specify multiple pages to open in the browser.
+To open a specified page in browser:
 
 **webpack.config.js**
 
@@ -891,23 +860,18 @@ If you wish to specify multiple pages to open in the browser.
 module.exports = {
   //...
   devServer: {
-    open: true,
-    openPage: ['different/page1', 'different/page2'],
+    open: ['/my-page'],
   },
 };
 ```
 
-Usage via the CLI
+Usage via the CLI:
 
 ```bash
-npx webpack serve --open --open-page different/page1 --open-page different/page2
+npx webpack serve --open /my-page
 ```
 
-## `devServer.overlay`
-
-`boolean = false` `object: { errors boolean = false, warnings boolean = false }`
-
-Shows a full-screen overlay in the browser when there are compiler errors or warnings. If you want to show only compiler errors:
+To open multiple specified pages in browser:
 
 **webpack.config.js**
 
@@ -915,12 +879,18 @@ Shows a full-screen overlay in the browser when there are compiler errors or war
 module.exports = {
   //...
   devServer: {
-    overlay: true,
+    open: ['/my-page', '/another-page'],
   },
 };
 ```
 
-If you want to show warnings as well as errors:
+Usage via the CLI:
+
+```bash
+npx webpack serve --open /my-page --open /another-page
+```
+
+Provide browser name to use instead of the default one:
 
 **webpack.config.js**
 
@@ -928,19 +898,22 @@ If you want to show warnings as well as errors:
 module.exports = {
   //...
   devServer: {
-    overlay: {
-      warnings: true,
-      errors: true,
+    open: {
+      app: {
+        name: 'google-chrome',
+      },
     },
   },
 };
 ```
 
-## `devServer.pfx`
+Usage via the CLI:
 
-`string`
+```bash
+npx webpack serve --open-aoo-name 'google-chrome'
+```
 
-When used via the CLI, a path to an SSL .pfx file. If used in options, it should be the bytestream of the .pfx file.
+The object accepts all [open](https://www.npmjs.com/package/open) options:
 
 **webpack.config.js**
 
@@ -948,22 +921,24 @@ When used via the CLI, a path to an SSL .pfx file. If used in options, it should
 module.exports = {
   //...
   devServer: {
-    pfx: './path/to/file.pfx',
+    open: {
+      target: ['first.html', 'http://localhost:8080/second.html'],
+      app: {
+        name: 'google-chrome',
+        arguments: ['--incognito', '--new-window'],
+      },
+    },
   },
 };
 ```
 
-Usage via the CLI
-
-```bash
-npx webpack serve --pfx ./path/to/file.pfx
-```
+T> The browser application name is platform dependent. Don't hard code it in reusable modules. For example, `'Chrome'` is `'Google Chrome'` on macOS, `'google-chrome'` on Linux and `'chrome'` on Windows.
 
-## `devServer.pfxPassphrase`
+## devServer.port
 
-`string`
+`'auto'` `string` `number`
 
-The passphrase to a SSL PFX file.
+Specify a port number to listen for requests on:
 
 **webpack.config.js**
 
@@ -971,22 +946,18 @@ The passphrase to a SSL PFX file.
 module.exports = {
   //...
   devServer: {
-    pfxPassphrase: 'passphrase',
+    port: 8080,
   },
 };
 ```
 
-Usage via the CLI
+Usage via the CLI:
 
 ```bash
-npx webpack serve --pfx-passphrase passphrase
+npx webpack serve --port 8080
 ```
 
-## `devServer.port`
-
-`number`
-
-Specify a port number to listen for requests on:
+`port` option can't be `null` or empty string, to automatically use a free port please use `port: 'auto'`:
 
 **webpack.config.js**
 
@@ -994,18 +965,12 @@ Specify a port number to listen for requests on:
 module.exports = {
   //...
   devServer: {
-    port: 8080,
+    port: 'auto',
   },
 };
 ```
 
-Usage via the CLI
-
-```bash
-npx webpack serve --port 8080
-```
-
-## `devServer.proxy`
+## devServer.proxy
 
 `object` `[object, function]`
 
@@ -1152,23 +1117,11 @@ module.exports = {
 };
 ```
 
-## `devServer.progress` - CLI only
+## devServer.static
 
-`boolean`
-
-Output running progress to console.
-
-```bash
-npx webpack serve --progress
-```
-
-## `devServer.public`
-
-`string`
-
-When using _inline mode_ and you're proxying dev-server, the inline client script does not always know where to connect to. It will try to guess the URL of the server based on `window.location`, but if that fails you'll need to use this.
+`boolean` `string` `[string]` `object` `[object]`
 
-For example, the dev-server is proxied by nginx, and available on `myapp.test`:
+This options allows to configure options for serving static files from directory (by default 'public' directory). To disable set it to `false`:
 
 **webpack.config.js**
 
@@ -1176,113 +1129,49 @@ For example, the dev-server is proxied by nginx, and available on `myapp.test`:
 module.exports = {
   //...
   devServer: {
-    public: 'myapp.test:80',
+    static: false,
   },
 };
 ```
 
-Usage via the CLI
+Usage via CLI:
 
 ```bash
-npx webpack serve --public myapp.test:80
-```
-
-## `devServer.publicPath` 🔑
-
-`string = '/'`
-
-The bundled files will be available in the browser under this path.
-
-Imagine that the server is running under `http://localhost:8080` and [`output.filename`](/configuration/output/#outputfilename) is set to `bundle.js`. By default the `devServer.publicPath` is `'/'`, so your bundle is available as `http://localhost:8080/bundle.js`.
-
-Change `devServer.publicPath` to put bundle under specific directory:
-
-**webpack.config.js**
-
-```javascript
-module.exports = {
-  //...
-  devServer: {
-    publicPath: '/assets/',
-  },
-};
+npx webpack serve --static
 ```
 
-The bundle will now be available as `http://localhost:8080/assets/bundle.js`.
-
-T> Make sure `devServer.publicPath` always starts and ends with a forward slash.
+To disable:
 
-It is also possible to use a full URL.
-
-**webpack.config.js**
-
-```javascript
-module.exports = {
-  //...
-  devServer: {
-    publicPath: 'http://localhost:8080/assets/',
-  },
-};
+```bash
+npx webpack serve --no-static
 ```
 
-The bundle will also be available as `http://localhost:8080/assets/bundle.js`.
-
-T> It is recommended that `devServer.publicPath` is the same as [`output.publicPath`](/configuration/output/#outputpublicpath).
-
-## `devServer.quiet` 🔑
+### directory
 
-`boolean`
+`string = path.join(process.cwd(), 'public')`
 
-With `devServer.quiet` enabled, nothing except the initial startup information will be written to the console. This also means that errors or warnings from webpack are not visible.
+Tell the server where to serve the content from. This is only necessary if you want to serve static files. [`static.publicPath`](#publicpath) will be used to determine where the bundles should be served from, and takes precedence.
 
 **webpack.config.js**
 
 ```javascript
-module.exports = {
-  //...
-  devServer: {
-    quiet: true,
-  },
-};
-```
-
-Usage via the CLI
-
-```bash
-npx webpack serve --quiet
-```
-
-## `devServer.serveIndex`
-
-`boolean = true`
-
-Tells dev-server to use [`serveIndex`](https://github.com/expressjs/serve-index) middleware when enabled.
-
-[`serveIndex`](https://github.com/expressjs/serve-index) middleware generates directory listings on viewing directories that don't have an index.html file.
+const path = require('path');
 
-```javascript
 module.exports = {
   //...
   devServer: {
-    serveIndex: true,
+    static: {
+      directory: path.join(__dirname, 'public'),
+    },
   },
 };
 ```
 
-Usage via the CLI
-
-```bash
-npx webpack serve --serveIndex
-```
-
-## `devServer.setup`
-
-`function (app, server)`
+T> It is recommended to use an absolute path.
 
-W> This option is **deprecated** in favor of [`devServer.before`](#devserverbefore) and will be removed in v4.0.0.
+### staticOptions
 
-Here you can access the Express app object and add your own custom middleware to it.
-For example, to define custom handlers for some paths:
+It is possible to configure advanced options for serving static files from [`static.directory`](#directory). See the [Express documentation](http://expressjs.com/en/4x/api.html#express.static) for the possible options.
 
 **webpack.config.js**
 
@@ -1290,226 +1179,157 @@ For example, to define custom handlers for some paths:
 module.exports = {
   //...
   devServer: {
-    setup: function (app, server) {
-      app.get('/some/path', function (req, res) {
-        res.json({ custom: 'response' });
-      });
+    static: {
+      staticOptions: {
+        redirect: true,
+      },
     },
   },
 };
 ```
 
-## `devServer.sockHost`
+### publicPath
 
-`string`
+`string = '/'` `string`
 
-Tells clients connected to `devServer` to use provided socket host.
+Tell the server at which URL to serve [`static.directory`](#directory) content. For example to serve a file `assets/manifest.json` at `/serve-public-path-url/manifest.json`, your configurations should be as following:
 
 **webpack.config.js**
 
 ```javascript
+const path = require('path');
+
 module.exports = {
   //...
   devServer: {
-    sockHost: 'myhost.test',
+    static: {
+      directory: path.join(__dirname, 'assets'),
+      publicPath: '/serve-public-path-url',
+    },
   },
 };
 ```
 
-## `devServer.sockPath`
-
-`string = '/sockjs-node'`
-
-The path at which to connect to the reloading socket.
+Provide an array of objects in case you have multiple static folders:
 
 **webpack.config.js**
 
 ```javascript
+const path = require('path');
+
 module.exports = {
   //...
   devServer: {
-    sockPath: '/socket',
+    static: [
+      {
+        directory: path.join(__dirname, 'assets'),
+        publicPath: '/serve-public-path-url',
+      },
+      {
+        directory: path.join(__dirname, 'css'),
+        publicPath: '/other-serve-public-path-url',
+      },
+    ],
   },
 };
 ```
 
-Usage via the CLI
-
-```bash
-npx webpack serve --sock-path /socket
-```
+### serveIndex
 
-## `devServer.sockPort`
+`boolean` `object = { icons: true }`
 
-`number` `string`
+Tell dev-server to use [`serveIndex`](https://github.com/expressjs/serve-index) middleware when enabled.
 
-Tells clients connected to `devServer` to use provided socket port.
+[`serveIndex`](https://github.com/expressjs/serve-index) middleware generates directory listings on viewing directories that don't have an `index.html` file.
 
 **webpack.config.js**
 
 ```javascript
-module.exports = {
-  //...
-  devServer: {
-    sockPort: 8080,
-  },
-};
-```
-
-## `devServer.staticOptions`
-
-`object`
-
-It is possible to configure advanced options for serving static files from `contentBase`. See the [Express documentation](http://expressjs.com/en/4x/api.html#express.static) for the possible options.
-
-**webpack.config.js**
+const path = require('path');
 
-```javascript
 module.exports = {
   //...
   devServer: {
-    staticOptions: {
-      redirect: false,
+    static: {
+      directory: path.join(__dirname, 'public'),
+      serveIndex: true,
     },
   },
 };
 ```
 
-T> This only works when using [`devServer.contentBase`](#devservercontentbase) as a `string`.
-
-## `devServer.stats` 🔑
+Usage via CLI:
 
-`string: 'none' | 'errors-only' | 'minimal' | 'normal' | 'verbose'` `object`
-
-This option lets you precisely control what bundle information gets displayed. This can be a nice middle ground if you want some bundle information, but not all of it.
-
-To show only errors in your bundle:
-
-**webpack.config.js**
-
-```javascript
-module.exports = {
-  //...
-  devServer: {
-    stats: 'errors-only',
-  },
-};
+```bash
+npx webpack serve --static-serve-index
 ```
 
-For more information, see the [**stats documentation**](/configuration/stats/).
-
-T> This option has no effect when used with `quiet` or `noInfo`.
-
-## `devServer.stdin` - CLI only
-
-`boolean`
-
-This option closes the server when stdin ends.
+To disable:
 
 ```bash
-npx webpack serve --stdin
+npx webpack serve --no-static-serve-index
 ```
 
-## `devServer.transportMode`
-
-`string = 'sockjs': 'sockjs' | 'ws'` `object`
-
-W> `transportMode` is an experimental option, meaning its usage could potentially change without warning.
-
-T> Providing a string to `devServer.transportMode` is a shortcut to setting both `devServer.transportMode.client` and `devServer.transportMode.server` to the given string value.
+### watch
 
-This option allows us either to choose the current `devServer` transport mode for client/server individually or to provide custom client/server implementation. This allows to specify how browser or other client communicates with the `devServer`.
-
-The current default mode is [`'sockjs'`](https://www.npmjs.com/package/sockjs). This mode uses [SockJS-node](https://github.com/sockjs/sockjs-node) as a server, and [SockJS-client](https://www.npmjs.com/package/sockjs-client) on the client.
+`boolean` `object`
 
-`'ws'` mode will become the default mode in the next major `devServer` version. This mode uses [ws](https://www.npmjs.com/package/ws) as a server, and native WebSockets on the client.
+Tell dev-server to watch the files served by the [`static.directory`](#directory) option. It is disabled by default. When enabled, file changes will trigger a full page reload.
 
-Use `'ws'` mode:
+**webpack.config.js**
 
 ```javascript
-module.exports = {
-  //...
-  devServer: {
-    transportMode: 'ws',
-  },
-};
-```
-
-T> When providing a custom client and server implementation make sure that they are compatible with one another to communicate successfully.
-
-### `devServer.transportMode.client`
-
-`string` `path`
-
-To create a custom client implementation, create a class that extends [`BaseClient`](https://github.com/webpack/webpack-dev-server/blob/master/client-src/clients/BaseClient.js).
-
-Using path to `CustomClient.js`, a custom WebSocket client implementation, along with the compatible `'ws'` server:
+const path = require('path');
 
-```javascript
 module.exports = {
   //...
   devServer: {
-    transportMode: {
-      client: require.resolve('./CustomClient'),
-      server: 'ws',
+    static: {
+      directory: path.join(__dirname, 'public'),
+      watch: true,
     },
   },
 };
 ```
 
-### `devServer.transportMode.server`
+Usage via CLI:
 
-`string` `path` `function`
-
-To create a custom server implementation, create a class that extends [`BaseServer`](https://github.com/webpack/webpack-dev-server/blob/master/lib/servers/BaseServer.js).
-
-Using path to `CustomServer.js`, a custom WebSocket server implementation, along with the compatible `'ws'` client:
-
-```javascript
-module.exports = {
-  //...
-  devServer: {
-    transportMode: {
-      client: 'ws',
-      server: require.resolve('./CustomServer'),
-    },
-  },
-};
+```bash
+npx webpack serve --static-watch
 ```
 
-Using class exported by `CustomServer.js`, a custom WebSocket server implementation, along with the compatible `'ws'` client:
+To disable:
 
-```javascript
-module.exports = {
-  //...
-  devServer: {
-    transportMode: {
-      client: 'ws',
-      server: require('./CustomServer'),
-    },
-  },
-};
+```bash
+npx webpack serve --no-static-watch
 ```
 
-Using custom, compatible WebSocket client and server implementations:
+It is possible to configure advanced options for watching static files from [`static.directory`](#directory). See the [`chokidar`](https://github.com/paulmillr/chokidar) documentation for the possible options.
+
+**webpack.config.js**
 
 ```javascript
+const path = require('path');
+
 module.exports = {
   //...
   devServer: {
-    transportMode: {
-      client: require.resolve('./CustomClient'),
-      server: require.resolve('./CustomServer'),
+    static: {
+      directory: path.join(__dirname, 'public'),
+      watch: {
+        ignored: '*.txt',
+        usePolling: false,
+      },
     },
   },
 };
 ```
 
-## `devServer.useLocalIp`
+## devServer.watchFiles
 
-`boolean`
+`string` `[string]` `object` `[object]`
 
-This option lets the browser open with your local IP.
+This option allows you to configure list of globs/directories/files to watch for file changes. For example:
 
 **webpack.config.js**
 
@@ -1517,22 +1337,12 @@ This option lets the browser open with your local IP.
 module.exports = {
   //...
   devServer: {
-    useLocalIp: true,
+    watchFiles: ['src/**/*.php', 'public/**/*'],
   },
 };
 ```
 
-Usage via the CLI
-
-```bash
-npx webpack serve --useLocalIp
-```
-
-## `devServer.watchContentBase`
-
-`boolean`
-
-Tell dev-server to watch the files served by the [`devServer.contentBase`](#devservercontentbase) option. It is disabled by default. When enabled, file changes will trigger a full page reload.
+It is possible to configure advanced options for watching files. See the [`chokidar`](https://github.com/paulmillr/chokidar) documentation for the possible options.
 
 **webpack.config.js**
 
@@ -1540,24 +1350,23 @@ Tell dev-server to watch the files served by the [`devServer.contentBase`](#devs
 module.exports = {
   //...
   devServer: {
-    watchContentBase: true,
+    watchFiles: {
+      paths: ['src/**/*.php', 'public/**/*'],
+      options: {
+        usePolling: false,
+      },
+    },
   },
 };
 ```
 
-Usage via the CLI
+## devServer.webSocketServer
 
-```bash
-npx webpack serve --watch-content-base
-```
+`false | 'sockjs' | 'ws'` `string` `function` `object`
 
-## `devServer.watchOptions` 🔑
+This option allows us either to choose the current web-socket server or to provide custom web-socket server implementation.
 
-`object`
-
-Control options related to watching the files.
-
-webpack uses the file system to get notified of file changes. In some cases, this does not work. For example, when using Network File System (NFS). [Vagrant](https://www.vagrantup.com/) also has a lot of problems with this. In these cases, use polling:
+The current default mode is `'ws'`. This mode uses [`ws`](https://www.npmjs.com/package/ws) as a server, and native WebSockets on the client.
 
 **webpack.config.js**
 
@@ -1565,22 +1374,14 @@ webpack uses the file system to get notified of file changes. In some cases, thi
 module.exports = {
   //...
   devServer: {
-    watchOptions: {
-      poll: true,
-    },
+    webSocketServer: 'ws',
   },
 };
 ```
 
-If this is too heavy on the file system, you can change this to an integer to set the interval in milliseconds.
-
-See [WatchOptions](/configuration/watch/) for more options.
-
-## `devServer.writeToDisk` 🔑
-
-`boolean = false` `function (filePath) => boolean`
+To create a custom server implementation, create a class that extends [`BaseServer`](https://github.com/webpack/webpack-dev-server/blob/master/lib/servers/BaseServer.js).
 
-Tells `devServer` to write generated assets to the disk. The output is written to the [output.path](/configuration/output/#outputpath) directory.
+Using path to `CustomServer.js`, a custom WebSocket server implementation, along with the compatible `'ws'` client:
 
 **webpack.config.js**
 
@@ -1588,12 +1389,15 @@ Tells `devServer` to write generated assets to the disk. The output is written t
 module.exports = {
   //...
   devServer: {
-    writeToDisk: true,
+    client: {
+      webSocketTransport: 'ws',
+    },
+    webSocketServer: require.resolve('./CustomServer'),
   },
 };
 ```
 
-Providing a `Function` to `devServer.writeToDisk` can be used for filtering. The function follows the same premise as [`Array#filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) in which a boolean return value tells if the file should be written to disk.
+Using custom, compatible WebSocket client and server implementations:
 
 **webpack.config.js**
 
@@ -1601,19 +1405,10 @@ Providing a `Function` to `devServer.writeToDisk` can be used for filtering. The
 module.exports = {
   //...
   devServer: {
-    writeToDisk: (filePath) => {
-      return /superman\.css$/.test(filePath);
+    client: {
+      webSocketTransport: require.resolve('./CustomClient'),
     },
+    webSocketServer: require.resolve('./CustomServer'),
   },
 };
 ```
-
-T> It is possible to set any Node.js flags via `NODE_OPTIONS`, for example, to configure `HTTP_MAX_HEADER_SIZE`:
-
-**package.json**
-
-```json
-{
-  "scripts": "NODE_OPTIONS='--max-http-header-size=100000' webpack serve"
-}
-```
diff --git a/src/content/configuration/stats.mdx b/src/content/configuration/stats.mdx
index a799fb73fa26..93edb238bed2 100644
--- a/src/content/configuration/stats.mdx
+++ b/src/content/configuration/stats.mdx
@@ -23,8 +23,6 @@ contributors:
 
 The `stats` option lets you precisely control what bundle information gets displayed. This can be a nice middle ground if you don't want to use `quiet` or `noInfo` because you want some bundle information, but not all of it.
 
-T> For webpack-dev-server, this property needs to be in the [`devServer` configuration object](/configuration/dev-server/#devserverstats-).
-
 W> This option does not have any effect when using the Node.js API. You need to pass the stats options to the `stats.toString()` resp. `stats.toJson()` calls instead.
 
 ```js
diff --git a/src/content/guides/development.mdx b/src/content/guides/development.mdx
index ac843d94c49d..83c7a77c1116 100644
--- a/src/content/guides/development.mdx
+++ b/src/content/guides/development.mdx
@@ -231,7 +231,7 @@ This tells `webpack-dev-server` to serve the files from the `dist` directory on
 
 T> `webpack-dev-server` serves bundled files from the directory defined in [`output.path`](/configuration/output/#outputpath), i.e., files will be available under `http://[devServer.host]:[devServer.port]/[output.publicPath]/[output.filename]`.
 
-W> webpack-dev-server doesn't write any output files after compiling. Instead, it keeps bundle files in memory and serves them as if they were real files mounted at the server's root path. If your page expects to find the bundle files on a different path, you can change this with the [`publicPath`](/configuration/dev-server/#devserverpublicpath-) option in the dev server's configuration.
+W> webpack-dev-server doesn't write any output files after compiling. Instead, it keeps bundle files in memory and serves them as if they were real files mounted at the server's root path. If your page expects to find the bundle files on a different path, you can change this with the [`devMiddleware.publicPath`](/configuration/dev-server/#devserverdevmiddleware) option in the dev server's configuration.
 
 Let's add a script to easily run the dev server as well:
 
diff --git a/src/content/guides/progressive-web-application.mdx b/src/content/guides/progressive-web-application.mdx
index a065a353cebd..21d233b2b66b 100644
--- a/src/content/guides/progressive-web-application.mdx
+++ b/src/content/guides/progressive-web-application.mdx
@@ -35,7 +35,7 @@ So let's test what the current experience is like using a server with more basic
 }
 ```
 
-Note: [webpack DevServer](/configuration/dev-server/) writes in-memory by default. We'll need to enable [writeToDisk](/configuration/dev-server/#devserverwritetodisk-) option in order for http-server to be able to serve files from `./dist` directory.
+Note: [webpack DevServer](/configuration/dev-server/) writes in-memory by default. We'll need to enable [devserverdevmiddleware.writeToDisk](/configuration/dev-server/#devserverdevmiddleware) option in order for http-server to be able to serve files from `./dist` directory.
 
 If you haven't previously done so, run the command `npm run build` to build your project. Then run the command `npm start`. This should produce the following output: