docs: add proxy example (#3937)

Author: snitin315

examples/proxy/README.md

@@ -0,0 +1,30 @@
+# proxy
+
+Proxying some URLs can be useful when you have a separate API backend development server and you want to send API requests on the same domain.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    proxy: {
+      "/proxy": {
+        target: "http://localhost:5000",
+      },
+    },
+  },
+};
+```
+
+To run this example use the following command:
+
+```console
+npx webpack serve --open
+```
+
+## What Should Happen
+
+1. The script start a proxy server on `http://localhost:5000/` and open `http://localhost:8080/` in your default browser.
+2. You should see the text on the page itself change to read `Success! Now visit /proxy`.
+3. Now visit the `/proxy` route by clicking on the `/proxy` text, you should see the text on the page itself change to read `response from proxy`.

examples/proxy/app.js

@@ -0,0 +1,6 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+target.classList.add("pass");
+target.innerHTML = "Success! Now visit <a href='/proxy'>/proxy</a>";

examples/proxy/webpack.config.js

@@ -0,0 +1,35 @@
+"use strict";
+
+const express = require("express");
+// our setup function adds behind-the-scenes bits to the config that all of our
+// examples need
+const { setup } = require("../util");
+
+async function listenProxyServer() {
+  const proxyApp = express();
+
+  proxyApp.get("/proxy", (req, res) => {
+    res.send("response from proxy");
+  });
+
+  await new Promise((resolve) => {
+    proxyApp.listen(5000, () => {
+      resolve();
+    });
+  });
+}
+
+module.exports = setup({
+  context: __dirname,
+  entry: "./app.js",
+  devServer: {
+    onBeforeSetupMiddleware: async () => {
+      await listenProxyServer();
+    },
+    proxy: {
+      "/proxy": {
+        target: "http://localhost:5000",
+      },
+    },
+  },
+});