docs: update README and examples (#2848)

Author: ylemkimon

README.md

@@ -6,7 +6,6 @@
 
 [![npm][npm]][npm-url]
 [![node][node]][node-url]
-[![deps][deps]][deps-url]
 [![tests][tests]][tests-url]
 [![coverage][cover]][cover-url]
 [![chat][chat]][chat-url]
@@ -52,14 +51,14 @@ There are two main, recommended methods of using the module:
 
 ### With the CLI
 
-The easiest way to use it is with the CLI. In the directory where your
+The easiest way to use it is with the [webpack CLI](https://webpack.js.org/api/cli/). In the directory where your
 `webpack.config.js` is, run:
 
 ```console
-node_modules/.bin/webpack-dev-server
+node_modules/.bin/webpack serve
 ```
 
-_**Note**: Many CLI options are available with `webpack-dev-server`. Explore this [link](https://webpack.js.org/configuration/dev-server/)._
+_**Note**: Many CLI options are available with `webpack serve`. Explore this [link](https://webpack.js.org/configuration/dev-server/)._
 
 ### With NPM Scripts
 
@@ -69,7 +68,7 @@ script as such:
 
 ```json
 "scripts": {
-  "start:dev": "webpack-dev-server"
+  "start:dev": "webpack serve"
 }
 ```
 
@@ -144,8 +143,6 @@ This project is heavily inspired by [peerigon/nof5](https://github.com/peerigon/
 [npm-url]: https://npmjs.com/package/webpack-dev-server
 [node]: https://img.shields.io/node/v/webpack-dev-server.svg
 [node-url]: https://nodejs.org
-[deps]: https://david-dm.org/webpack/webpack-dev-server.svg
-[deps-url]: https://david-dm.org/webpack/webpack-dev-server
 [tests]: https://github.com/webpack/webpack-dev-server/workflows/webpack-dev-server/badge.svg
 [tests-url]: https://github.com/webpack/webpack-dev-server/actions?query=workflow%3Awebpack-dev-server
 [cover]: https://codecov.io/gh/webpack/webpack-dev-server/branch/master/graph/badge.svg

examples/api/middleware/server.js

@@ -5,11 +5,7 @@ const WebpackDevServer = require('../../../lib/Server');
 const webpackConfig = require('./webpack.config');
 
 const compiler = Webpack(webpackConfig);
-const devServerOptions = Object.assign({}, webpackConfig.devServer, {
-  stats: {
-    colors: true,
-  },
-});
+const devServerOptions = webpackConfig.devServer;
 const server = new WebpackDevServer(compiler, devServerOptions);
 
 server.listen(8080, '127.0.0.1', () => {

examples/api/middleware/webpack.config.js

@@ -10,4 +10,7 @@ module.exports = setup({
   output: {
     filename: 'bundle.js',
   },
+  stats: {
+    colors: true,
+  },
 });

examples/api/simple/server.js

@@ -7,9 +7,6 @@ const webpackConfig = require('./webpack.config');
 const compiler = Webpack(webpackConfig);
 const devServerOptions = Object.assign({}, webpackConfig.devServer, {
   open: true,
-  stats: {
-    colors: true,
-  },
 });
 const server = new WebpackDevServer(compiler, devServerOptions);
 

examples/api/simple/webpack.config.js

@@ -10,4 +10,7 @@ module.exports = setup({
   output: {
     filename: 'bundle.js',
   },
+  stats: {
+    colors: true,
+  },
 });

examples/cli/listen-socket/README.md

@@ -1,7 +1,7 @@
 # CLI: Open Page Option (Multiple)
 
 ```console
-npm run webpack-dev-server -- --open-page example1.html,example2.html
+npm run webpack-dev-server -- --open --open-page example1.html --open-page example2.html
 ```
 
 Some applications may consist of multiple pages. During development it may

examples/cli/listen-socket/check-socket.js

@@ -20,7 +20,7 @@ module.exports = [
       }),
     ],
   }),
-  setup({
+  {
     context: __dirname,
     entry: './app2.js',
     output: {
@@ -33,5 +33,5 @@ module.exports = [
         title: 'Open Page (Multiple) / Example / Page 2',
       }),
     ],
-  }),
+  },
 ];