docs: add magicHtml examples (#3752)

Author: snitin315

examples/magic-html/README.md

@@ -0,0 +1,55 @@
+# Magic HTML
+
+Enables/Disables magic HTML routes (enabled by default).
+
+## true
+
+Setting it to `true` will enable magic HTML routes ( routes corresponding to your webpack output, in this example `/main` for `main.js`):
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    magicHtml: true,
+  },
+};
+```
+
+Usage via CLI:
+
+```console
+npx webpack serve --magic-html --open
+```
+
+### What Should Happen
+
+1. The script should open `http://localhost:8080/` in your default browser.
+2. Go to `http://localhost:8080/main`, you should see the text on the page itself change to read `You are viewing the magic HTML route!`.
+
+## false
+
+Setting it to `false` will disable magic HTML route (`/main`):
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    magicHtml: false,
+  },
+};
+```
+
+Usage via CLI:
+
+```console
+npx webpack serve --no-magic-html --open
+```
+
+### What Should Happen
+
+1. The script should open `http://localhost:8080/` in your default browser.
+2. Go to `http://localhost:8080/main`, you should see the text on the page itself change to read `Cannot GET /main` as it is not accessible.

examples/magic-html/app.js

@@ -0,0 +1,11 @@
+"use strict";
+
+if (window.location.href.endsWith("main")) {
+  document.querySelector("body").innerHTML =
+    "<div>You are viewing the magic HTML route!</div>";
+} else {
+  const target = document.querySelector("#target");
+
+  target.classList.add("pass");
+  target.innerHTML = "Success!";
+}

examples/magic-html/webpack.config.js

@@ -0,0 +1,13 @@
+"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: {
+    magicHtml: true,
+  },
+});