docs: improve https example (#3828)

Author: snitin315

examples/https/boolean/README.md

@@ -0,0 +1,27 @@
+# https
+
+You may choose to wish to run `webpack-dev-server` on `https`.
+
+## boolean
+
+Use HTTPS protocol.
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    https: true,
+  },
+};
+```
+
+Usage via CLI:
+
+```console
+npx webpack serve --open --https
+```
+
+## 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/https/app.js renamed to examples/https/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/https/webpack.config.js renamed to examples/https/boolean/webpack.config.js

@@ -2,58 +2,58 @@
 
 You may choose to wish to run `webpack-dev-server` on `https`.
 
-## https
+Customize `https` configuration with the following options:
 
-Use HTTPS protocol.
+- `key`: Path to an SSL key.
+- `pfx`: Path to an SSL pfx file.
+- `cert`: Path to an SSL certificate or content of an SSL certificate.
+- `ca`: Path to an SSL CA certificate or content of an SSL CA certificate.
+- `crl`: Path to PEM formatted CRLs (Certificate Revocation Lists) or content of PEM formatted CRLs (Certificate Revocation Lists).
+- `passphrase`: Passphrase for a pfx file.
+- `requestCert`: Request for an SSL certificate.
 
 ```js
 module.exports = {
   // ...
   devServer: {
-    https: true,
+    https: {
+      key: "../ssl/server.key",
+      pfx: "../ssl/server.pfx",
+      cert: "../ssl/server.crt",
+      ca: "../ssl/ca.pem",
+      passphrase: "webpack-dev-server",
+    },
   },
 };
 ```
 
 Usage via CLI:
 
 ```console
-npx webpack serve --open --https
+npx webpack serve --open --https-key ./ssl/server.key --https-pfx ./ssl/server.pfx --https-cert ./ssl/server.crt --https-ca ./ssl/ca.pem --https-passphrase webpack-dev-server --https-request-cert
 ```
 
-## https options
-
-Customize `https` configuration with the following options:
-
-- `key`: Path to an SSL key.
-- `pfx`: Path to an SSL pfx file.
-- `cert`: Path to an SSL certificate.
-- `ca`: Path to an SSL CA certificate.
-- `passphrase`: Passphrase for a pfx file.
-- `requestCert`: Request for an SSL certificate.
+You can also directly pass the contents of respective files:
 
 ```js
+const fs = require("fs");
+const path = require("path");
+
 module.exports = {
   // ...
   devServer: {
     https: {
-      key: "./ssl/server.key",
-      pfx: "./ssl/server.pfx",
-      cert: "./ssl/server.crt",
-      ca: "./ssl/ca.pem",
+      key: fs.readFileSync(path.join(__dirname, "./ssl/server.key")),
+      pfx: fs.readFileSync(path.join(__dirname, "./ssl/server.pfx")),
+      cert: fs.readFileSync(path.join(__dirname, "./ssl/server.crt")),
+      ca: fs.readFileSync(path.join(__dirname, "./ssl/ca.pem")),
       passphrase: "webpack-dev-server",
       requestCert: true,
     },
   },
 };
 ```
 
-Usage via CLI:
-
-```console
-npx webpack serve --open --https-key ./ssl/server.key --https-pfx ./ssl/server.pfx --https-cert ./ssl/server.crt --https-ca ./ssl/ca.pem --https-passphrase webpack-dev-server --https-request-cert
-```
-
 ## What Should Happen
 
 1. The script should open `https://localhost:8080/` in your default browser.

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

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

examples/https/object/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: {
+    https: {
+      key: "./ssl/server.key",
+      pfx: "./ssl/server.pfx",
+      cert: "./ssl/server.crt",
+      ca: "./ssl/ca.pem",
+      passphrase: "webpack-dev-server",
+      requestCert: true,
+    },
+  },
+});