docs: update examples (#3326)

Author: snitin315

examples/cli/bonjour/README.md

@@ -6,7 +6,7 @@ is started.
 To run this example, run this command in your console or terminal:
 
 ```console
-npm run webpack-dev-server -- --bonjour
+npx webpack serve --bonjour
 ```
 
 ## What Should Happen
@@ -33,7 +33,7 @@ module.exports = {
 ```
 
 ```console
-npm run webpack-dev-server -- --config webpack.config.js
+npx webpack serve --config webpack.config.js
 ```
 
 ## What Should Happen

examples/cli/compression/README.md

@@ -10,7 +10,7 @@ It is enabled by default.
 To run this example, run this command in your console or terminal:
 
 ```console
-npm run webpack-dev-server -- --open-target --compress
+npx webpack serve --open-target --compress
 ```
 
 ### What should happen
@@ -25,7 +25,7 @@ npm run webpack-dev-server -- --open-target --compress
 To run this example, run this command in your console or terminal:
 
 ```console
-npm run webpack-dev-server -- --open --no-compress
+npx webpack serve --open --no-compress
 ```
 
 ### What should happen

examples/cli/default/README.md

@@ -3,13 +3,13 @@
 This example demonstrates how to use `webpack-dev-server`.
 
 ```console
-npm run webpack-dev-server -- --open-target
+npx webpack serve --open-target
 ```
 
 To run your app using an alternative config, use:
 
 ```console
-npm run webpack-dev-server -- --open-target --config alternative.config.js
+npx webpack serve --open-target --config alternative.config.js
 ```
 
 ## What Should Happen

examples/cli/history-api-fallback/README.md

@@ -5,7 +5,7 @@ support in `webpack-dev-server`, effectively asking the server to fallback to
 `index.html` in the event that a requested resource cannot be found.
 
 ```shell
-npm run webpack-dev-server -- --open-target --history-api-fallback
+npx webpack serve --open-target --history-api-fallback
 ```
 
 _Note: some URLs don't work by default. For example; if the url contains a dot.

examples/cli/hmr/README.md

@@ -3,10 +3,12 @@
 Hot Module Replacement (HMR) exchanges, adds, or removes modules while an
 application is running, without a full reload of the page.
 
+## --hot
+
 To run this example, run this command in your console or terminal:
 
 ```console
-npm run webpack-dev-server -- --open-target --hot
+npx webpack serve --open-target --hot
 ```
 
 ## What Should Happen
@@ -18,8 +20,8 @@ npm run webpack-dev-server -- --open-target --hot
 In the devtools console you should see:
 
 ```
-[WDS] App updated. Recompiling...
-[WDS] App hot update...
+[webpack-dev-server] App updated. Recompiling...
+[webpack-dev-server] App hot update...
 [HMR] Checking for updates on the server...
 [HMR] Updated modules:
 [HMR]  - ./example.js
@@ -28,3 +30,31 @@ In the devtools console you should see:
 
 You should also see the text on the page itself change to match your edits in
 `example.js`.
+
+## --hot only
+
+Enables Hot Module Replacement without page refresh as a fallback in case of build failures.
+
+```console
+npx webpack serve --open-target --hot only
+```
+
+## What Should Happen
+
+1. The script should open `http://localhost:8080/` in your default browser.
+2. In your editor, open `example.js` and change `const` keyword to `constt` to cause build error.
+3. Open the console in your browser's devtools.
+4. Revert the change in step 2 and change any part of the `innerHTML` string.
+
+In the devtools console you should see:
+
+```
+[webpack-dev-server] App updated. Recompiling...
+[webpack-dev-server] App hot update...
+[HMR] Checking for updates on the server...
+ ⚠️ Ignored an update to unaccepted module ./example.js -> ./app.js
+[HMR] Nothing hot Updated.
+[HMR] App is up to date.
+```
+
+5. Refresh the page and see the text on the page itself change to match your edits in `example.js`.

examples/cli/host-and-port/README.md

@@ -6,39 +6,39 @@ will run. The `host` and `port` options allow for that.
 ## IPv4
 
 ```console
-npm run webpack-dev-server -- --open-target --port 5000 --host 0.0.0.0
+npx webpack serve --open-target --port 5000 --host 0.0.0.0
 ```
 
 ## IPv6
 
 _This also works with IPv6_
 
 ```console
-npm run webpack-dev-server -- --open-target --port 5000 --host ::
+npx webpack serve --open-target --port 5000 --host ::
 ```
 
 ## 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.
 
 ```console
-npm run webpack-dev-server -- --open-target --port 5000 --host local-ip
+npx webpack serve --open-target --port 5000 --host local-ip
 ```
 
 ## local-ipv4
 
 Specifying `local-ipv4` as `host` will try to resolve the `host` option as your local `IPv4` address.
 
 ```console
-npm run webpack-dev-server -- --open-target --port 5000 --host local-ipv4
+npx webpack serve --open-target --port 5000 --host local-ipv4
 ```
 
 ## local-ipv6
 
 Specifying `local-ipv6` as `host` will try to resolve the `host` option as your local `IPv6` address.
 
 ```console
-npm run webpack-dev-server -- --open-target --port 5000 --host local-ipv6
+npx webpack serve --open-target --port 5000 --host local-ipv6
 ```
 
 ## What Should Happen

examples/cli/multi-compiler/README.md

@@ -3,7 +3,7 @@
 `webpack-dev-server` should be able to compile multiple webpack configs.
 
 ```shell
-npm run webpack-dev-server -- --open-target
+npx webpack serve --open-target
 ```
 
 ## What Should Happen

examples/cli/node-false/README.md

@@ -1,7 +1,7 @@
 # CLI: Webpack `node` Option
 
 ```shell
-npm run webpack-dev-server -- --open-target
+npx webpack serve --open-target
 ```
 
 ## What should happen

examples/cli/open-target-multiple/README.md

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

examples/cli/open-target/README.md

@@ -3,25 +3,25 @@
 Open browser:
 
 ```
-npm run webpack-dev-server -- --open-target
+npx webpack serve --open-target
 ```
 
 Open specific page in browser:
 
 ```
-npm run webpack-dev-server -- --open-target /example.html#page1
+npx webpack serve --open-target /example.html#page1
 ```
 
 Open specific browser:
 
 ```
-npm run webpack-dev-server -- --open-app firefox
+npx webpack serve --open-app firefox
 ```
 
 Open specific page in specific browser:
 
 ```
-npm run webpack-dev-server -- --open-target example.html#page1 --open-app firefox
+npx webpack serve --open-target example.html#page1 --open-app firefox
 ```
 
 Some applications may consist of multiple pages. During development it may

examples/cli/overlay/README.md

@@ -1,7 +1,7 @@
 # CLI: --client-overlay option
 
 ```shell
-npm run webpack-dev-server -- --open-target --client-overlay
+npx webpack serve --open-target --client-overlay
 ```
 
 ## What Should Happen

examples/cli/progress/README.md

@@ -1,7 +1,7 @@
 # CLI: Progress Option
 
 ```shell
-npm run webpack-dev-server -- --open-target --client-progress
+npx webpack serve --open-target --client-progress
 ```
 
 ## What Should Happen

examples/cli/public-protocol/README.md

@@ -1,7 +1,7 @@
 # CLI: Public Option Protocol
 
 ```console
-npm run webpack-dev-server
+npx webpack serve
 ```
 
 _NOTE: replace `<insert local ip>` with your local IP Address._

examples/cli/public/README.md

@@ -1,7 +1,7 @@
 # CLI: Public Option
 
 ```console
-npm run webpack-dev-server -- --open-target --host 0.0.0.0 --public <insert local ip>:8080
+npx webpack serve --open-target --host 0.0.0.0 --public <insert local ip>:8080
 ```
 
 _NOTE: replace `<insert local ip>` with your local IP Address._

examples/cli/watch-static/README.md

@@ -3,7 +3,7 @@
 ## Watching a single directory
 
 ```console
-npm run webpack-dev-server -- --static assets --open-target
+npx webpack serve --static assets --open-target
 ```
 
 ### What Should Happen
@@ -26,13 +26,13 @@ module.exports = {
 ```
 
 ```console
-npm run webpack-dev-server -- --open-target
+npx webpack serve --open-target
 ```
 
 or via CLI only:
 
 ```console
-npm run webpack-dev-server -- --static assets --static css --open-target
+npx webpack serve --static assets --static css --open-target
 ```
 
 ### What Should Happen

examples/general/config-array/README.md

@@ -3,7 +3,7 @@
 This example demonstrates using a `webpack` config containing an array of configs.
 
 ```console
-npm run webpack-dev-server -- --open
+npx webpack serve --open-target
 ```
 
 ## What Should Happen

examples/general/config-promise/README.md

@@ -4,7 +4,7 @@ This example demonstrates using `webpack-dev-server` with a `webpack` config tha
 returns a `Promise`.
 
 ```console
-npm run webpack-dev-server -- --open
+npx webpack serve --open-target
 ```
 
 ## What Should Happen

examples/general/proxy-advanced/README.md

@@ -6,7 +6,7 @@ This example demonstrates a user case whereby the app proxies all urls that star
 `http://jsonplaceholder.typicode.com/users`.
 
 ```console
-npm run webpack-dev-server -- --open
+npx webpack serve --open-target
 ```
 
 ## What should happen

examples/general/proxy-hot-reload/README.md

@@ -1,7 +1,7 @@
 # General: Proxy Hot Reload
 
 ```shell
-npm run webpack-dev-server -- --open
+npx webpack serve --open-target
 ```
 
 Enables hot reloading for proxy config. If function is provided instead of

examples/general/proxy-simple/README.md

@@ -1,7 +1,7 @@
 # General: Simple Proxy
 
 ```console
-npm run webpack-dev-server -- --open
+npx webpack serve --open-target
 ```
 
 In `webpack.config.js` there is a very simple configuration for a proxy. Note that this only works when proxying to a direct ip address. See the proxy-advanced example if you want to proxy to a domain.

examples/general/universal-config/README.md

@@ -3,7 +3,7 @@
 This example demonstrates using a `webpack` config containing a `target: web` config and `target:node` config.
 
 ```console
-npm run webpack-dev-server -- --open
+npx webpack serve --open-target
 ```
 
 ## What Should Happen

examples/general/webworker/README.md

@@ -3,7 +3,7 @@
 This example demonstrates using a WebWorker within an app run by `webpack-dev-server`.
 
 ```console
-npm run webpack-dev-server
+npx webpack serve
 ```
 
 ## What should happen

examples/run-example.js

@@ -29,7 +29,6 @@
     "pretest": "npm run lint",
     "prepare": "npm run build:client && husky install",
     "build:client": "rimraf ./client/* && babel client-src/ --out-dir client/ --ignore \"webpack.config.js\" && webpack --config client/webpack.config.js",
-    "webpack-dev-server": "node examples/run-example.js",
     "release": "standard-version"
   },
   "dependencies": {