docs: improve bonjour example (#3834)

Author: snitin315

examples/bonjour/boolean/README.md

@@ -0,0 +1,28 @@
+# Bonjour (ZeroConf)
+
+The Bonjour capability broadcasts server information via ZeroConf when the Server
+is started.
+
+## boolean
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    bonjour: true,
+  },
+};
+```
+
+Usage via CLI:
+
+```console
+npx webpack serve --bonjour
+```
+
+## What Should Happen
+
+A Zeroconf broadcast should occur, containing data with a type of `http` and a
+subtype of `webpack`.

examples/bonjour/boolean/app.js

@@ -0,0 +1,5 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+target.innerHTML = "Please check your Zeroconf service.";

examples/bonjour/webpack.config.js renamed to examples/bonjour/boolean/webpack.config.js

@@ -2,9 +2,12 @@
 
 // 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,
   entry: "./app.js",
+  devServer: {
+    bonjour: true,
+  },
 });

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

@@ -3,36 +3,14 @@
 The Bonjour capability broadcasts server information via ZeroConf when the Server
 is started.
 
-**webpack.config.js**
-
-```js
-module.exports = {
-  // ...
-  devServer: {
-    bonjour: true,
-  },
-};
-```
-
-Usage via CLI:
-
-```console
-npx webpack serve --bonjour
-```
-
-## What Should Happen
-
-A Zeroconf broadcast should occur, containing data with a type of `http` and a
-subtype of `webpack`.
-
-# Bonjour options
+## Bonjour options
 
 Allows options from bonjour for more [configuration](https://github.com/watson/bonjour#initializing):
 
 ```js
 // webpack.config.js
 module.exports = {
-  /* ... */
+  // ...
   devServer: {
     bonjour: {
       name: "webpack-dev-server",

examples/bonjour/object/app.js

@@ -0,0 +1,5 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+target.innerHTML = "Please check your Zeroconf service.";

examples/bonjour/object/webpack.config.js

@@ -0,0 +1,17 @@
+"use strict";
+
+// our setup function adds behind-the-scenes bits to the config that all of our
+// examples need
+const { setup } = require("../../util");
+
+module.exports = setup({
+  context: __dirname,
+  entry: "./app.js",
+  devServer: {
+    bonjour: {
+      name: "webpack-dev-server",
+      type: "https",
+      subtype: "webpack",
+    },
+  },
+});