From 6b913a4923068bea6571aba271ff844a74efb2be Mon Sep 17 00:00:00 2001
From: nakjun <111031253+nakjun12@users.noreply.github.com>
Date: Mon, 25 Aug 2025 10:59:56 +0900
Subject: [PATCH 1/5] feat: add beforeunload word

---
 .cspell.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.cspell.json b/.cspell.json
index 4a7bc2be12..30ba8bbcf0 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -3,6 +3,7 @@
   "language": "en,en-gb",
   "words": [
     "apos",
+    "beforeunload",
     "camelcase",
     "tapable",
     "sockjs",

From 1071acb0ab0d671f844c2260495cb76543778cf4 Mon Sep 17 00:00:00 2001
From: nakjun <111031253+nakjun12@users.noreply.github.com>
Date: Mon, 25 Aug 2025 11:00:32 +0900
Subject: [PATCH 2/5] feat: add beforeunload examples to reproduce isUnloading
 bug

- Add beforeunload-hmr-fallback: Tests bug when HMR fails and falls back to reload
- Add beforeunload-live-reload: Tests bug when liveReload is enabled

Both examples demonstrate the isUnloading flag getting stuck after
canceling the "Leave site?" dialog, blocking subsequent updates.
---
 .../beforeunload/hmr-fallback/README.md       | 39 +++++++++
 .../client/beforeunload/hmr-fallback/app.js   | 79 +++++++++++++++++++
 .../hmr-fallback/webpack.config.js            | 14 ++++
 .../client/beforeunload/live-reload/README.md | 39 +++++++++
 .../client/beforeunload/live-reload/app.js    | 79 +++++++++++++++++++
 .../live-reload/webpack.config.js             | 14 ++++
 6 files changed, 264 insertions(+)
 create mode 100644 examples/client/beforeunload/hmr-fallback/README.md
 create mode 100644 examples/client/beforeunload/hmr-fallback/app.js
 create mode 100644 examples/client/beforeunload/hmr-fallback/webpack.config.js
 create mode 100644 examples/client/beforeunload/live-reload/README.md
 create mode 100644 examples/client/beforeunload/live-reload/app.js
 create mode 100644 examples/client/beforeunload/live-reload/webpack.config.js

diff --git a/examples/client/beforeunload/hmr-fallback/README.md b/examples/client/beforeunload/hmr-fallback/README.md
new file mode 100644
index 0000000000..a90440f6d8
--- /dev/null
+++ b/examples/client/beforeunload/hmr-fallback/README.md
@@ -0,0 +1,39 @@
+# client.beforeunload Example
+
+This example reproduces a bug where the `isUnloading` flag gets stuck after canceling the "Leave site?" dialog, blocking HMR/Live Reload.
+
+## Bug Description
+
+When a user cancels the native confirmation dialog triggered by a `beforeunload` event listener, webpack-dev-server's internal `isUnloading` state remains `true`. This causes all subsequent HMR and live reloads to be ignored until manual refresh.
+
+## Configuration
+
+```js
+module.exports = {
+  devServer: {
+    hot: true,
+    liveReload: false, // Intentionally configured to cause HMR fallback
+  },
+};
+```
+
+## How to Reproduce the Bug
+
+### Prerequisites
+
+- Enable "Slow 3G" in browser DevTools Network tab (to make the issue more visible)
+- Open browser console to see webpack-dev-server logs
+
+### Steps
+
+1. Run `npx webpack serve` and open `http://localhost:8080/`
+2. Click **"Add Beforeunload Event"** button
+3. Click **"Reload Page"** button (or press F5/Ctrl+R)
+4. When "Leave site?" dialog appears, click **"Cancel"**
+5. Edit `app.js` file (make any change to trigger rebuild)
+6. **Bug**: Page does not update despite file changes
+
+### Expected vs Actual Behavior
+
+**Expected**: After canceling dialog, file changes should still trigger page updates  
+**Actual**: Page updates are completely blocked until manual refresh
diff --git a/examples/client/beforeunload/hmr-fallback/app.js b/examples/client/beforeunload/hmr-fallback/app.js
new file mode 100644
index 0000000000..6f4006c276
--- /dev/null
+++ b/examples/client/beforeunload/hmr-fallback/app.js
@@ -0,0 +1,79 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+// Beforeunload event handler
+function beforeunloadHandler(event) {
+  console.log("[webpack-dev-server] beforeunload event triggered");
+  event.preventDefault();
+  event.returnValue = "";
+  return "";
+}
+
+let isEventRegistered = false;
+
+// Create add event button
+const addEventButton = document.createElement("button");
+addEventButton.textContent = "Add Beforeunload Event";
+addEventButton.style.cssText =
+  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #28a745; color: white; border: none; border-radius: 4px;";
+addEventButton.addEventListener("click", function () {
+  if (!isEventRegistered) {
+    window.addEventListener("beforeunload", beforeunloadHandler);
+    isEventRegistered = true;
+    updateStatus();
+    console.log("[webpack-dev-server] beforeunload event added");
+  }
+});
+
+// Create remove event button
+const removeEventButton = document.createElement("button");
+removeEventButton.textContent = "Remove Beforeunload Event";
+removeEventButton.style.cssText =
+  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #dc3545; color: white; border: none; border-radius: 4px;";
+removeEventButton.addEventListener("click", function () {
+  if (isEventRegistered) {
+    window.removeEventListener("beforeunload", beforeunloadHandler);
+    isEventRegistered = false;
+    updateStatus();
+    console.log("[webpack-dev-server] beforeunload event removed");
+  }
+});
+
+// Create reload button
+const reloadButton = document.createElement("button");
+reloadButton.textContent = "Reload Page";
+reloadButton.style.cssText =
+  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 4px;";
+reloadButton.addEventListener("click", function () {
+  console.log("[webpack-dev-server] page reload triggered");
+  window.location.reload();
+});
+
+// Create status display
+const statusDisplay = document.createElement("div");
+statusDisplay.style.cssText =
+  "margin: 10px; padding: 10px; border: 2px solid #ccc; border-radius: 4px; font-weight: bold;";
+
+function updateStatus() {
+  statusDisplay.textContent = isEventRegistered
+    ? "Status: Beforeunload event is ACTIVE - Page exit will be blocked"
+    : "Status: Beforeunload event is INACTIVE - Page exit will not be blocked";
+  statusDisplay.style.backgroundColor = isEventRegistered
+    ? "#d4edda"
+    : "#f8d7da";
+  statusDisplay.style.borderColor = isEventRegistered ? "#28a745" : "#dc3545";
+}
+
+target.classList.add("pass");
+target.innerHTML = "Beforeunload Event Controller";
+target.appendChild(document.createElement("br"));
+target.appendChild(document.createElement("br"));
+target.appendChild(statusDisplay);
+target.appendChild(document.createElement("br"));
+target.appendChild(addEventButton);
+target.appendChild(removeEventButton);
+target.appendChild(reloadButton);
+
+// Initialize status
+updateStatus();
diff --git a/examples/client/beforeunload/hmr-fallback/webpack.config.js b/examples/client/beforeunload/hmr-fallback/webpack.config.js
new file mode 100644
index 0000000000..636e72c7a2
--- /dev/null
+++ b/examples/client/beforeunload/hmr-fallback/webpack.config.js
@@ -0,0 +1,14 @@
+"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: {
+    hot: true,
+    liveReload: false,
+  },
+});
diff --git a/examples/client/beforeunload/live-reload/README.md b/examples/client/beforeunload/live-reload/README.md
new file mode 100644
index 0000000000..6403831e4e
--- /dev/null
+++ b/examples/client/beforeunload/live-reload/README.md
@@ -0,0 +1,39 @@
+# client.beforeunload Example
+
+This example reproduces a bug where the `isUnloading` flag gets stuck after canceling the "Leave site?" dialog, blocking Live Reload updates.
+
+## Bug Description
+
+When a user cancels the native confirmation dialog triggered by a `beforeunload` event listener, webpack-dev-server's internal `isUnloading` state remains `true`. This causes all subsequent Live Reload updates to be ignored until manual refresh.
+
+## Configuration
+
+```js
+module.exports = {
+  devServer: {
+    hot: false,
+    liveReload: true, // Test Live Reload scenario
+  },
+};
+```
+
+## How to Reproduce the Bug
+
+### Prerequisites
+
+- Enable "Slow 3G" in browser DevTools Network tab (to make the issue more visible)
+- Open browser console to see webpack-dev-server logs
+
+### Steps
+
+1. Run `npx webpack serve` and open `http://localhost:8080/`
+2. Click **"Add Beforeunload Event"** button
+3. Click **"Reload Page"** button (or press F5/Ctrl+R)
+4. When "Leave site?" dialog appears, click **"Cancel"**
+5. Edit `app.js` file (make any change to trigger rebuild)
+6. **Bug**: Page does not update despite file changes
+
+### Expected vs Actual Behavior
+
+**Expected**: After canceling dialog, file changes should still trigger Live Reload updates  
+**Actual**: Live Reload updates are completely blocked until manual refresh
diff --git a/examples/client/beforeunload/live-reload/app.js b/examples/client/beforeunload/live-reload/app.js
new file mode 100644
index 0000000000..6f4006c276
--- /dev/null
+++ b/examples/client/beforeunload/live-reload/app.js
@@ -0,0 +1,79 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+// Beforeunload event handler
+function beforeunloadHandler(event) {
+  console.log("[webpack-dev-server] beforeunload event triggered");
+  event.preventDefault();
+  event.returnValue = "";
+  return "";
+}
+
+let isEventRegistered = false;
+
+// Create add event button
+const addEventButton = document.createElement("button");
+addEventButton.textContent = "Add Beforeunload Event";
+addEventButton.style.cssText =
+  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #28a745; color: white; border: none; border-radius: 4px;";
+addEventButton.addEventListener("click", function () {
+  if (!isEventRegistered) {
+    window.addEventListener("beforeunload", beforeunloadHandler);
+    isEventRegistered = true;
+    updateStatus();
+    console.log("[webpack-dev-server] beforeunload event added");
+  }
+});
+
+// Create remove event button
+const removeEventButton = document.createElement("button");
+removeEventButton.textContent = "Remove Beforeunload Event";
+removeEventButton.style.cssText =
+  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #dc3545; color: white; border: none; border-radius: 4px;";
+removeEventButton.addEventListener("click", function () {
+  if (isEventRegistered) {
+    window.removeEventListener("beforeunload", beforeunloadHandler);
+    isEventRegistered = false;
+    updateStatus();
+    console.log("[webpack-dev-server] beforeunload event removed");
+  }
+});
+
+// Create reload button
+const reloadButton = document.createElement("button");
+reloadButton.textContent = "Reload Page";
+reloadButton.style.cssText =
+  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 4px;";
+reloadButton.addEventListener("click", function () {
+  console.log("[webpack-dev-server] page reload triggered");
+  window.location.reload();
+});
+
+// Create status display
+const statusDisplay = document.createElement("div");
+statusDisplay.style.cssText =
+  "margin: 10px; padding: 10px; border: 2px solid #ccc; border-radius: 4px; font-weight: bold;";
+
+function updateStatus() {
+  statusDisplay.textContent = isEventRegistered
+    ? "Status: Beforeunload event is ACTIVE - Page exit will be blocked"
+    : "Status: Beforeunload event is INACTIVE - Page exit will not be blocked";
+  statusDisplay.style.backgroundColor = isEventRegistered
+    ? "#d4edda"
+    : "#f8d7da";
+  statusDisplay.style.borderColor = isEventRegistered ? "#28a745" : "#dc3545";
+}
+
+target.classList.add("pass");
+target.innerHTML = "Beforeunload Event Controller";
+target.appendChild(document.createElement("br"));
+target.appendChild(document.createElement("br"));
+target.appendChild(statusDisplay);
+target.appendChild(document.createElement("br"));
+target.appendChild(addEventButton);
+target.appendChild(removeEventButton);
+target.appendChild(reloadButton);
+
+// Initialize status
+updateStatus();
diff --git a/examples/client/beforeunload/live-reload/webpack.config.js b/examples/client/beforeunload/live-reload/webpack.config.js
new file mode 100644
index 0000000000..0ecb0eb6c0
--- /dev/null
+++ b/examples/client/beforeunload/live-reload/webpack.config.js
@@ -0,0 +1,14 @@
+"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: {
+    hot: false,
+    liveReload: true,
+  },
+});

From 08fb89db887108998c9a5697a60beae3a9141c30 Mon Sep 17 00:00:00 2001
From: nakjun <111031253+nakjun12@users.noreply.github.com>
Date: Mon, 25 Aug 2025 11:13:41 +0900
Subject: [PATCH 3/5] feat: add reload prevention log message

Log when reload is prevented during beforeunload to help developers
diagnose why hot module replacement or live reload isn't working.
---
 client-src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client-src/index.js b/client-src/index.js
index eeee5b717e..2ce0404025 100644
--- a/client-src/index.js
+++ b/client-src/index.js
@@ -287,6 +287,7 @@ const overlay =
  */
 const reloadApp = ({ hot, liveReload }, currentStatus) => {
   if (currentStatus.isUnloading) {
+    log.info("Reload prevented.");
     return;
   }
 

From 15fd8ff3ef869391525a012d4ac63e2e3e8f3cf4 Mon Sep 17 00:00:00 2001
From: nakjun <111031253+nakjun12@users.noreply.github.com>
Date: Tue, 2 Sep 2025 12:08:06 +0900
Subject: [PATCH 4/5] fix: clarify HMR blocking messages with actionable
 guidance

---
 client-src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client-src/index.js b/client-src/index.js
index 2ce0404025..e8a2ff47c5 100644
--- a/client-src/index.js
+++ b/client-src/index.js
@@ -287,7 +287,7 @@ const overlay =
  */
 const reloadApp = ({ hot, liveReload }, currentStatus) => {
   if (currentStatus.isUnloading) {
-    log.info("Reload prevented.");
+    log.warn("HMR blocked. Please refresh the page.");
     return;
   }
 

From ae063b25a525dc0a9832cd40c4266d99a4695d0e Mon Sep 17 00:00:00 2001
From: nakjun <111031253+nakjun12@users.noreply.github.com>
Date: Tue, 2 Sep 2025 12:10:08 +0900
Subject: [PATCH 5/5] refactor: consolidate beforeunload examples

- Remove duplicate examples and create single unified example demonstrating HMR/Live Reload blocking issue.
---
 examples/client/beforeunload/README.md        | 33 ++++++++
 .../beforeunload/{hmr-fallback => }/app.js    | 22 ------
 .../beforeunload/hmr-fallback/README.md       | 39 ---------
 .../hmr-fallback/webpack.config.js            | 14 ----
 .../client/beforeunload/live-reload/README.md | 39 ---------
 .../client/beforeunload/live-reload/app.js    | 79 -------------------
 .../{live-reload => }/webpack.config.js       |  4 +-
 7 files changed, 35 insertions(+), 195 deletions(-)
 create mode 100644 examples/client/beforeunload/README.md
 rename examples/client/beforeunload/{hmr-fallback => }/app.js (69%)
 delete mode 100644 examples/client/beforeunload/hmr-fallback/README.md
 delete mode 100644 examples/client/beforeunload/hmr-fallback/webpack.config.js
 delete mode 100644 examples/client/beforeunload/live-reload/README.md
 delete mode 100644 examples/client/beforeunload/live-reload/app.js
 rename examples/client/beforeunload/{live-reload => }/webpack.config.js (79%)

diff --git a/examples/client/beforeunload/README.md b/examples/client/beforeunload/README.md
new file mode 100644
index 0000000000..dd9d1bae5a
--- /dev/null
+++ b/examples/client/beforeunload/README.md
@@ -0,0 +1,33 @@
+# Beforeunload Example
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  devServer: {
+    hot: true,
+    liveReload: true, // Both HMR and Live Reload can be affected
+  },
+};
+```
+
+Usage via CLI:
+
+```console
+npx webpack serve --open
+```
+
+This example demonstrates an issue where webpack-dev-server's `isUnloading` flag gets stuck after canceling the browser's "Leave site?" dialog, blocking both HMR and Live Reload updates.
+
+## What Should Happen
+
+The script should open `http://localhost:8080/` in your default browser.
+
+1. Click **"Add Beforeunload Event"** button
+2. Try to reload the page and click **"Cancel"** in the dialog
+3. Edit `app.js` file to trigger rebuild
+4. **Issue**: Page updates are blocked until manual refresh
+
+## How to Fix
+
+**Manually refresh the page** (F5/Ctrl+R) to restore HMR and Live Reload functionality.
diff --git a/examples/client/beforeunload/hmr-fallback/app.js b/examples/client/beforeunload/app.js
similarity index 69%
rename from examples/client/beforeunload/hmr-fallback/app.js
rename to examples/client/beforeunload/app.js
index 6f4006c276..bb0860fba8 100644
--- a/examples/client/beforeunload/hmr-fallback/app.js
+++ b/examples/client/beforeunload/app.js
@@ -2,9 +2,7 @@
 
 const target = document.querySelector("#target");
 
-// Beforeunload event handler
 function beforeunloadHandler(event) {
-  console.log("[webpack-dev-server] beforeunload event triggered");
   event.preventDefault();
   event.returnValue = "";
   return "";
@@ -12,7 +10,6 @@ function beforeunloadHandler(event) {
 
 let isEventRegistered = false;
 
-// Create add event button
 const addEventButton = document.createElement("button");
 addEventButton.textContent = "Add Beforeunload Event";
 addEventButton.style.cssText =
@@ -26,31 +23,14 @@ addEventButton.addEventListener("click", function () {
   }
 });
 
-// Create remove event button
-const removeEventButton = document.createElement("button");
-removeEventButton.textContent = "Remove Beforeunload Event";
-removeEventButton.style.cssText =
-  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #dc3545; color: white; border: none; border-radius: 4px;";
-removeEventButton.addEventListener("click", function () {
-  if (isEventRegistered) {
-    window.removeEventListener("beforeunload", beforeunloadHandler);
-    isEventRegistered = false;
-    updateStatus();
-    console.log("[webpack-dev-server] beforeunload event removed");
-  }
-});
-
-// Create reload button
 const reloadButton = document.createElement("button");
 reloadButton.textContent = "Reload Page";
 reloadButton.style.cssText =
   "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 4px;";
 reloadButton.addEventListener("click", function () {
-  console.log("[webpack-dev-server] page reload triggered");
   window.location.reload();
 });
 
-// Create status display
 const statusDisplay = document.createElement("div");
 statusDisplay.style.cssText =
   "margin: 10px; padding: 10px; border: 2px solid #ccc; border-radius: 4px; font-weight: bold;";
@@ -72,8 +52,6 @@ target.appendChild(document.createElement("br"));
 target.appendChild(statusDisplay);
 target.appendChild(document.createElement("br"));
 target.appendChild(addEventButton);
-target.appendChild(removeEventButton);
 target.appendChild(reloadButton);
 
-// Initialize status
 updateStatus();
diff --git a/examples/client/beforeunload/hmr-fallback/README.md b/examples/client/beforeunload/hmr-fallback/README.md
deleted file mode 100644
index a90440f6d8..0000000000
--- a/examples/client/beforeunload/hmr-fallback/README.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# client.beforeunload Example
-
-This example reproduces a bug where the `isUnloading` flag gets stuck after canceling the "Leave site?" dialog, blocking HMR/Live Reload.
-
-## Bug Description
-
-When a user cancels the native confirmation dialog triggered by a `beforeunload` event listener, webpack-dev-server's internal `isUnloading` state remains `true`. This causes all subsequent HMR and live reloads to be ignored until manual refresh.
-
-## Configuration
-
-```js
-module.exports = {
-  devServer: {
-    hot: true,
-    liveReload: false, // Intentionally configured to cause HMR fallback
-  },
-};
-```
-
-## How to Reproduce the Bug
-
-### Prerequisites
-
-- Enable "Slow 3G" in browser DevTools Network tab (to make the issue more visible)
-- Open browser console to see webpack-dev-server logs
-
-### Steps
-
-1. Run `npx webpack serve` and open `http://localhost:8080/`
-2. Click **"Add Beforeunload Event"** button
-3. Click **"Reload Page"** button (or press F5/Ctrl+R)
-4. When "Leave site?" dialog appears, click **"Cancel"**
-5. Edit `app.js` file (make any change to trigger rebuild)
-6. **Bug**: Page does not update despite file changes
-
-### Expected vs Actual Behavior
-
-**Expected**: After canceling dialog, file changes should still trigger page updates  
-**Actual**: Page updates are completely blocked until manual refresh
diff --git a/examples/client/beforeunload/hmr-fallback/webpack.config.js b/examples/client/beforeunload/hmr-fallback/webpack.config.js
deleted file mode 100644
index 636e72c7a2..0000000000
--- a/examples/client/beforeunload/hmr-fallback/webpack.config.js
+++ /dev/null
@@ -1,14 +0,0 @@
-"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: {
-    hot: true,
-    liveReload: false,
-  },
-});
diff --git a/examples/client/beforeunload/live-reload/README.md b/examples/client/beforeunload/live-reload/README.md
deleted file mode 100644
index 6403831e4e..0000000000
--- a/examples/client/beforeunload/live-reload/README.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# client.beforeunload Example
-
-This example reproduces a bug where the `isUnloading` flag gets stuck after canceling the "Leave site?" dialog, blocking Live Reload updates.
-
-## Bug Description
-
-When a user cancels the native confirmation dialog triggered by a `beforeunload` event listener, webpack-dev-server's internal `isUnloading` state remains `true`. This causes all subsequent Live Reload updates to be ignored until manual refresh.
-
-## Configuration
-
-```js
-module.exports = {
-  devServer: {
-    hot: false,
-    liveReload: true, // Test Live Reload scenario
-  },
-};
-```
-
-## How to Reproduce the Bug
-
-### Prerequisites
-
-- Enable "Slow 3G" in browser DevTools Network tab (to make the issue more visible)
-- Open browser console to see webpack-dev-server logs
-
-### Steps
-
-1. Run `npx webpack serve` and open `http://localhost:8080/`
-2. Click **"Add Beforeunload Event"** button
-3. Click **"Reload Page"** button (or press F5/Ctrl+R)
-4. When "Leave site?" dialog appears, click **"Cancel"**
-5. Edit `app.js` file (make any change to trigger rebuild)
-6. **Bug**: Page does not update despite file changes
-
-### Expected vs Actual Behavior
-
-**Expected**: After canceling dialog, file changes should still trigger Live Reload updates  
-**Actual**: Live Reload updates are completely blocked until manual refresh
diff --git a/examples/client/beforeunload/live-reload/app.js b/examples/client/beforeunload/live-reload/app.js
deleted file mode 100644
index 6f4006c276..0000000000
--- a/examples/client/beforeunload/live-reload/app.js
+++ /dev/null
@@ -1,79 +0,0 @@
-"use strict";
-
-const target = document.querySelector("#target");
-
-// Beforeunload event handler
-function beforeunloadHandler(event) {
-  console.log("[webpack-dev-server] beforeunload event triggered");
-  event.preventDefault();
-  event.returnValue = "";
-  return "";
-}
-
-let isEventRegistered = false;
-
-// Create add event button
-const addEventButton = document.createElement("button");
-addEventButton.textContent = "Add Beforeunload Event";
-addEventButton.style.cssText =
-  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #28a745; color: white; border: none; border-radius: 4px;";
-addEventButton.addEventListener("click", function () {
-  if (!isEventRegistered) {
-    window.addEventListener("beforeunload", beforeunloadHandler);
-    isEventRegistered = true;
-    updateStatus();
-    console.log("[webpack-dev-server] beforeunload event added");
-  }
-});
-
-// Create remove event button
-const removeEventButton = document.createElement("button");
-removeEventButton.textContent = "Remove Beforeunload Event";
-removeEventButton.style.cssText =
-  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #dc3545; color: white; border: none; border-radius: 4px;";
-removeEventButton.addEventListener("click", function () {
-  if (isEventRegistered) {
-    window.removeEventListener("beforeunload", beforeunloadHandler);
-    isEventRegistered = false;
-    updateStatus();
-    console.log("[webpack-dev-server] beforeunload event removed");
-  }
-});
-
-// Create reload button
-const reloadButton = document.createElement("button");
-reloadButton.textContent = "Reload Page";
-reloadButton.style.cssText =
-  "padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 4px;";
-reloadButton.addEventListener("click", function () {
-  console.log("[webpack-dev-server] page reload triggered");
-  window.location.reload();
-});
-
-// Create status display
-const statusDisplay = document.createElement("div");
-statusDisplay.style.cssText =
-  "margin: 10px; padding: 10px; border: 2px solid #ccc; border-radius: 4px; font-weight: bold;";
-
-function updateStatus() {
-  statusDisplay.textContent = isEventRegistered
-    ? "Status: Beforeunload event is ACTIVE - Page exit will be blocked"
-    : "Status: Beforeunload event is INACTIVE - Page exit will not be blocked";
-  statusDisplay.style.backgroundColor = isEventRegistered
-    ? "#d4edda"
-    : "#f8d7da";
-  statusDisplay.style.borderColor = isEventRegistered ? "#28a745" : "#dc3545";
-}
-
-target.classList.add("pass");
-target.innerHTML = "Beforeunload Event Controller";
-target.appendChild(document.createElement("br"));
-target.appendChild(document.createElement("br"));
-target.appendChild(statusDisplay);
-target.appendChild(document.createElement("br"));
-target.appendChild(addEventButton);
-target.appendChild(removeEventButton);
-target.appendChild(reloadButton);
-
-// Initialize status
-updateStatus();
diff --git a/examples/client/beforeunload/live-reload/webpack.config.js b/examples/client/beforeunload/webpack.config.js
similarity index 79%
rename from examples/client/beforeunload/live-reload/webpack.config.js
rename to examples/client/beforeunload/webpack.config.js
index 0ecb0eb6c0..802f72b24f 100644
--- a/examples/client/beforeunload/live-reload/webpack.config.js
+++ b/examples/client/beforeunload/webpack.config.js
@@ -2,13 +2,13 @@
 
 // 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,
   entry: "./app.js",
   devServer: {
-    hot: false,
+    hot: true,
     liveReload: true,
   },
 });