diff --git a/examples/setup-middlewares/README.md b/examples/setup-middlewares/README.md
new file mode 100644
index 0000000000..68cee1722c
--- /dev/null
+++ b/examples/setup-middlewares/README.md
@@ -0,0 +1,40 @@
+# setupMiddlewares
+
+Provides the ability to execute a custom function and apply custom middleware(s).
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    setupMiddlewares: (middlewares, devServer) => {
+      if (!devServer) {
+        throw new Error("webpack-dev-server is not defined");
+      }
+
+      const sendResponses = () => {
+        devServer.app.get("/setup-middleware/some/path", (_, response) => {
+          response.send("setup-middlewares option GET");
+        });
+      };
+
+      middlewares.push(sendResponses());
+
+      return middlewares;
+    },
+  },
+};
+```
+
+To run this example use the following command:
+
+```console
+npx webpack serve --open
+```
+
+## What Should Happen
+
+1. The script should open `http://localhost:8080/` in your default browser.
+2. You should see the text on the page itself change to read `Success!`.
+3. Go to `http://localhost:8080/setup-middleware/some/path`, you should see the text on the page itself change to read `setup-middlewares option GET`.
diff --git a/examples/setup-middlewares/app.js b/examples/setup-middlewares/app.js
new file mode 100644
index 0000000000..51cf4a396b
--- /dev/null
+++ b/examples/setup-middlewares/app.js
@@ -0,0 +1,6 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+target.classList.add("pass");
+target.innerHTML = "Success!";
diff --git a/examples/setup-middlewares/webpack.config.js b/examples/setup-middlewares/webpack.config.js
new file mode 100644
index 0000000000..22ce45bd5f
--- /dev/null
+++ b/examples/setup-middlewares/webpack.config.js
@@ -0,0 +1,27 @@
+"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: {
+    setupMiddlewares: (middlewares, devServer) => {
+      if (!devServer) {
+        throw new Error("webpack-dev-server is not defined");
+      }
+
+      const sendResponses = () => {
+        devServer.app.get("/setup-middleware/some/path", (_, response) => {
+          response.send("setup-middlewares option GET");
+        });
+      };
+
+      middlewares.push(sendResponses());
+
+      return middlewares;
+    },
+  },
+});
diff --git a/test/e2e/setup-middlewares.test.js b/test/e2e/setup-middlewares.test.js
index 9d35330815..1af3c22a04 100644
--- a/test/e2e/setup-middlewares.test.js
+++ b/test/e2e/setup-middlewares.test.js
@@ -23,17 +23,17 @@ describe("setupMiddlewares option", () => {
             throw new Error("webpack-dev-server is not defined");
           }
 
-          const sendResponses = (server) => {
-            server.app.get("/setup-middleware/some/path", (_, response) => {
+          const sendResponses = () => {
+            devServer.app.get("/setup-middleware/some/path", (_, response) => {
               response.send("setup-middlewares option GET");
             });
 
-            server.app.post("/setup-middleware/some/path", (_, response) => {
+            devServer.app.post("/setup-middleware/some/path", (_, response) => {
               response.send("setup-middlewares option POST");
             });
           };
 
-          middlewares.push(sendResponses(devServer));
+          middlewares.push(sendResponses());
 
           return middlewares;
         },