docs: add headers option example (#3809)

Author: snitin315

examples/headers/function/README.md

@@ -0,0 +1,29 @@
+# headers option as a function
+
+Adds headers to all responses.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    headers: () => {
+      return { "X-Custom-Header": ["key1=value1", "key2=value2"] };
+    },
+  },
+};
+```
+
+To run this example use the following command:
+
+```console
+npx webpack serve --open
+```
+
+## What should happen
+
+1. The script should open `http://localhost:8080/`.
+2. You should see the text on the page itself change to read `Success!`.
+3. Open the console in your browser's devtools and select the _Network_ tab.
+4. Find `main.js`. The response headers should contain `X-Custom-Header: key1=value1` and `X-Custom-Header: key2=value2`.

examples/headers/function/app.js

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

examples/headers/function/webpack.config.js

@@ -0,0 +1,15 @@
+"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: {
+    headers: () => {
+      return { "X-Custom-Header": ["key1=value1", "key2=value2"] };
+    },
+  },
+});

examples/headers/object/README.md

@@ -0,0 +1,29 @@
+# headers option as an object
+
+Adds headers to all responses.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    headers: {
+      "X-Custom-Header": "yes",
+    },
+  },
+};
+```
+
+To run this example use the following command:
+
+```console
+npx webpack serve --open
+```
+
+## What should happen
+
+1. The script should open `http://localhost:8080/`.
+2. You should see the text on the page itself change to read `Success!`.
+3. Open the console in your browser's devtools and select the _Network_ tab.
+4. Find `main.js`. The response headers should contain `X-Custom-Header: yes`.

examples/headers/object/app.js

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

examples/headers/object/webpack.config.js

@@ -0,0 +1,15 @@
+"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: {
+    headers: {
+      "X-Custom-Header": "yes",
+    },
+  },
+});