docs: improve http2 example (#3832)

Author: snitin315

examples/http2/boolean/README.md

@@ -0,0 +1,25 @@
+# http2 option
+
+Serve over HTTP/2 using [spdy](https://www.npmjs.com/package/spdy). This option is ignored for Node 15.0.0 and above, as `spdy` is broken for those versions.
+
+## HTTP/2 with a self-signed certificate:
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    http2: true,
+  },
+};
+```
+
+Usage via CLI:
+
+```console
+npx webpack serve --open --http2
+```
+
+### What Should Happen
+
+1. The script should open `https://localhost:8080/` in your default browser.
+2. You should see the text on the page itself change to read `Success!`.

examples/http2/app.js renamed to examples/http2/boolean/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/http2/webpack.config.js renamed to examples/http2/boolean/webpack.config.js

@@ -2,28 +2,6 @@
 
 Serve over HTTP/2 using [spdy](https://www.npmjs.com/package/spdy). This option is ignored for Node 15.0.0 and above, as `spdy` is broken for those versions.
 
-## HTTP/2 with a self-signed certificate:
-
-```js
-module.exports = {
-  // ...
-  devServer: {
-    http2: true,
-  },
-};
-```
-
-Usage via CLI:
-
-```console
-npx webpack serve --open --http2
-```
-
-### What Should Happen
-
-1. The script should open `https://localhost:8080/` in your default browser.
-2. You should see the text on the page itself change to read `Success!`.
-
 ## HTTP/2 with a custom certificate:
 
 Provide your own certificate using the [https](https://webpack.js.org/configuration/dev-server/#devserverhttps) option:

examples/http2/README.md renamed to examples/http2/with-https-configuration/README.md

@@ -0,0 +1,6 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+target.classList.add("pass");
+target.innerHTML = "Success!";

examples/http2/with-https-configuration/app.js

@@ -0,0 +1,20 @@
+"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: {
+    http2: true,
+    https: {
+      key: "./ssl/server.key",
+      pfx: "./ssl/server.pfx",
+      cert: "./ssl/server.crt",
+      ca: "./ssl/ca.pem",
+      passphrase: "webpack-dev-server",
+    },
+  },
+});