docs: update

Author: snitin315

src/content/configuration/dev-server.md

@@ -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**
 
@@ -43,7 +41,7 @@ module.exports = {
   //...
   devServer: {
     static: {
-      directory: path.join(__dirname, 'dist'),
+      directory: path.join(__dirname, 'public'),
     },
     compress: true,
     port: 9000,
@@ -54,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`.
 
@@ -83,28 +83,6 @@ npx webpack serve
 
 A list of CLI options for `serve` is available [here](https://github.com/webpack/webpack-cli/blob/master/SERVE-OPTIONS.md)
 
-## `devServer.onAfterSetupMiddleware`
-
-`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: {
-    onAfterSetupMiddleware: function (devServer) {
-      devServer.app.get('/some/path', function (req, res) {
-        res.json({ custom: 'response' });
-      });
-    },
-  },
-};
-```
-
 ## `devServer.allowedHosts`
 
 `'auto' | 'all'` `[string]`
@@ -162,29 +140,6 @@ To use this option with the CLI pass the `--allowed-hosts` as following:
 npx webpack serve --entry ./entry/file --output-path ./output/path --allowed-hosts .host.com --allowed-hosts host2.com
 ```
 
-## `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**
-
-```javascript
-module.exports = {
-  //...
-  devServer: {
-    onBeforeSetupMiddleware: function (app, server, compiler) {
-      app.get('/some/path', function (req, res) {
-        res.json({ custom: 'response' });
-      });
-    },
-  },
-};
-```
-
 ## `devServer.bonjour`
 
 `boolean` `object`
@@ -829,6 +784,51 @@ 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**
+
+```javascript
+module.exports = {
+  //...
+  devServer: {
+    onAfterSetupMiddleware: function (devServer) {
+      devServer.app.get('/some/path', function (req, res) {
+        res.json({ custom: 'response' });
+      });
+    },
+  },
+};
+```
+
+## `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**
+
+```javascript
+module.exports = {
+  //...
+  devServer: {
+    onBeforeSetupMiddleware: function (app, server, compiler) {
+      app.get('/some/path', function (req, res) {
+        res.json({ custom: 'response' });
+      });
+    },
+  },
+};
+```
+
 ## devServer.open
 
 `boolean` `string` `[string]` `object` `[object]`
@@ -1306,6 +1306,8 @@ npx webpack serve --no-static-watch
 
 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');
 
@@ -1329,6 +1331,8 @@ module.exports = {
 
 This option allows you to configure list of globs/directories/files to watch for file changes. For example:
 
+**webpack.config.js**
+
 ```javascript
 module.exports = {
   //...
@@ -1340,6 +1344,8 @@ module.exports = {
 
 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**
+
 ```javascript
 module.exports = {
   //...
@@ -1356,48 +1362,53 @@ module.exports = {
 
 ## devServer.webSocketServer
 
-`string` `path` `function`
+`false | 'sockjs' | 'ws'` `string` `function` `object`
 
-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).
+This option allows us either to choose the current web-socket server or to provide custom web-socket server implementation.
 
-Using path to `CustomServer.js`, a custom WebSocket server implementation, along with the compatible `'ws'` client:
+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**
 
 ```javascript
 module.exports = {
   //...
   devServer: {
-    transportMode: {
-      client: 'ws',
-      server: require.resolve('./CustomServer'),
-    },
+    webSocketServer: 'ws',
   },
 };
 ```
 
-Using class exported by `CustomServer.js`, a custom WebSocket server implementation, along with the compatible `'ws'` client:
+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:
+
+**webpack.config.js**
 
 ```javascript
 module.exports = {
   //...
   devServer: {
-    transportMode: {
-      client: 'ws',
-      server: require('./CustomServer'),
+    client: {
+      webSocketTransport: 'ws',
     },
+    webSocketServer: require.resolve('./CustomServer'),
   },
 };
 ```
 
 Using custom, compatible WebSocket client and server implementations:
 
+**webpack.config.js**
+
 ```javascript
 module.exports = {
   //...
   devServer: {
-    transportMode: {
-      client: require.resolve('./CustomClient'),
-      server: require.resolve('./CustomServer'),
+    client: {
+      webSocketTransport: require.resolve('./CustomClient'),
     },
+    webSocketServer: require.resolve('./CustomServer'),
   },
 };
 ```