docs: improve examples (#3672)

Author: snitin315

examples/cli/bonjour/README.md renamed to examples/bonjour/README.md

@@ -3,7 +3,18 @@
 The Bonjour capability broadcasts server information via ZeroConf when the Server
 is started.
 
-To run this example, run this command in your console or terminal:
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    bonjour: true,
+  },
+};
+```
+
+Usage via CLI:
 
 ```console
 npx webpack serve --bonjour

examples/cli/bonjour/app.js renamed to examples/bonjour/app.js

@@ -2,7 +2,7 @@
 
 // our setup function adds behind-the-scenes bits to the config that all of our
 // examples need
-const { setup } = require("../../util");
+const { setup } = require("../util");
 
 module.exports = setup({
   context: __dirname,

examples/cli/hmr/webpack.config.js renamed to examples/bonjour/webpack.config.js

@@ -5,9 +5,20 @@ to roughly 30% of its original size before the files are sent to the browser.
 
 It is enabled by default.
 
-## `--compress`
+## true
 
-To run this example, run this command in your console or terminal:
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    compress: true,
+  },
+};
+```
+
+Usage via CLI:
 
 ```console
 npx webpack serve --open --compress
@@ -20,9 +31,20 @@ npx webpack serve --open --compress
 3. Open the console in your browser's devtools and select the _Network_ tab.
 4. Find `bundle.js`. The response headers should contain `Content-Encoding: gzip`.
 
-## `--no-compress`
+## false
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    compress: false,
+  },
+};
+```
 
-To run this example, run this command in your console or terminal:
+Usage via CLI:
 
 ```console
 npx webpack serve --open --no-compress

examples/cli/https/README.md

@@ -2,7 +2,7 @@
 
 // our setup function adds behind-the-scenes bits to the config that all of our
 // examples need
-const { setup } = require("../../util");
+const { setup } = require("../util");
 
 module.exports = setup({
   context: __dirname,

examples/cli/https/webpack.config.js

@@ -1,4 +1,4 @@
-# CLI: Default State
+# Default State
 
 This example demonstrates how to use `webpack-dev-server`.
 

examples/cli/open-target/README.md

@@ -2,7 +2,7 @@
 
 // our setup function adds behind-the-scenes bits to the config that all of our
 // examples need
-const { setup } = require("../../util");
+const { setup } = require("../util");
 
 module.exports = setup({
   context: __dirname,

examples/cli/progress/webpack.config.js

@@ -1,10 +1,23 @@
-# CLI: History API Fallback Option
+# historyApiFallback Option
 
 This option enables [History API Fallback](https://github.com/bripkens/connect-history-api-fallback)
 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
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    historyApiFallback: true,
+  },
+};
+```
+
+Usage via CLI:
+
+```console
 npx webpack serve --open --history-api-fallback
 ```
 

examples/cli/web-socket-server/webpack.config.js

@@ -2,7 +2,7 @@
 
 // our setup function adds behind-the-scenes bits to the config that all of our
 // examples need
-const { setup } = require("../../util");
+const { setup } = require("../util");
 
 module.exports = setup({
   context: __dirname,

examples/cli/web-socket-url-cli/README.md

@@ -3,9 +3,22 @@
 Hot Module Replacement (HMR) exchanges, adds, or removes modules while an
 application is running, without a full reload of the page.
 
-## --hot
+## true
 
-To run this example, run this command in your console or terminal:
+Enable webpack's [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) feature:
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    hot: true,
+  },
+};
+```
+
+Usage via CLI:
 
 ```console
 npx webpack serve --open --hot
@@ -31,10 +44,23 @@ 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
+## only
 
 Enables Hot Module Replacement without page refresh as a fallback in case of build failures.
 
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    hot: "only",
+  },
+};
+```
+
+Usage via CLI:
+
 ```console
 npx webpack serve --open --hot only
 ```

examples/cli/web-socket-url-cli/app.js

@@ -2,7 +2,7 @@
 
 // our setup function adds behind-the-scenes bits to the config that all of our
 // examples need
-const { setup } = require("../../util");
+const { setup } = require("../util");
 
 module.exports = setup({
   context: __dirname,