docs: improve HMR example (#3950)

Author: snitin315

Diff for: examples/hmr/README.md renamed to examples/hmr/boolean/README.md

@@ -1,7 +1,6 @@
 # Hot Module Reloading
 
-Hot Module Replacement (HMR) exchanges, adds, or removes modules while an
-application is running, without a full reload of the page.
+Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload of the page.
 
 ## true
 
@@ -44,43 +43,29 @@ In the devtools console you should see:
 You should also see the text on the page itself change to match your edits in
 `example.js`.
 
-## only
+## false
 
-Enables Hot Module Replacement without page refresh as a fallback in case of build failures.
+Disable webpack's [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) feature:
 
 **webpack.config.js**
 
 ```js
 module.exports = {
   // ...
   devServer: {
-    hot: "only",
+    hot: false,
   },
 };
 ```
 
 Usage via CLI:
 
 ```console
-npx webpack serve --open --hot only
+npx webpack serve --open --no-hot
 ```
 
 ## What Should Happen
 
 1. The script should open `http://localhost:8080/` in your default browser.
-2. In your editor, open `example.js` and change `const` keyword to `constt` to cause build error.
-3. Open the console in your browser's devtools.
-4. Revert the change in step 2 and change any part of the `innerHTML` string.
-
-In the devtools console you should see:
-
-```
-[webpack-dev-server] App updated. Recompiling...
-[webpack-dev-server] App hot update...
-[HMR] Checking for updates on the server...
- ⚠️ Ignored an update to unaccepted module ./example.js -> ./app.js
-[HMR] Nothing hot Updated.
-[HMR] App is up to date.
-```
-
-5. Refresh the page and see the text on the page itself change to match your edits in `example.js`.
+2. In your editor, open `example.js` and change any part of the `innerHTML` string.
+3. text on the page shouldn't change itself to match your edits in `example.js`, without reloading the page.

Diff for: examples/hmr/app.js renamed to examples/hmr/boolean/app.js

@@ -2,9 +2,12 @@
 
 // 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: true,
+  },
 });

Diff for: examples/hmr/example.js renamed to examples/hmr/boolean/example.js

@@ -0,0 +1,43 @@
+# Hot Module Reloading
+
+Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload of the page.
+
+## only
+
+Enables Hot Module Replacement without page refresh as a fallback in case of build failures.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  // ...
+  devServer: {
+    hot: "only",
+  },
+};
+```
+
+Usage via CLI:
+
+```console
+npx webpack serve --open --hot only
+```
+
+## What Should Happen
+
+1. The script should open `http://localhost:8080/` in your default browser.
+2. In your editor, open `example.js` and change any part of the `innerHTML` string.
+3. Open the console in your browser's devtools.
+
+In the devtools console you should see:
+
+```
+[webpack-dev-server] App updated. Recompiling...
+[webpack-dev-server] App hot update...
+[HMR] Checking for updates on the server...
+ ⚠️ Ignored an update to unaccepted module ./example.js -> ./app.js
+[HMR] Nothing hot Updated.
+[HMR] App is up to date.
+```
+
+5. Refresh the page and see the text on the page itself change to match your edits in `example.js`.

Diff for: examples/hmr/webpack.config.js renamed to examples/hmr/boolean/webpack.config.js

@@ -0,0 +1,11 @@
+"use strict";
+
+require("./example");
+
+if (module.hot) {
+  module.hot.accept((err) => {
+    if (err) {
+      console.error("Cannot apply HMR update.", err);
+    }
+  });
+}

Diff for: examples/hmr/only/README.md

@@ -0,0 +1,6 @@
+"use strict";
+
+const target = document.querySelector("#target");
+
+target.innerHTML =
+  "Modify and save <code>/examples/hmr/example.js</code> to update this element without reloading the page.";

Diff for: examples/hmr/only/app.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: {
+    hot: "only",
+  },
+});