3
3
Hot Module Replacement (HMR) exchanges, adds, or removes modules while an
4
4
application is running, without a full reload of the page.
5
5
6
+ ## --hot
7
+
6
8
To run this example, run this command in your console or terminal:
7
9
8
10
``` console
@@ -18,8 +20,8 @@ npx webpack serve --open-target --hot
18
20
In the devtools console you should see:
19
21
20
22
```
21
- [WDS ] App updated. Recompiling...
22
- [WDS ] App hot update...
23
+ [webpack-dev-server ] App updated. Recompiling...
24
+ [webpack-dev-server ] App hot update...
23
25
[HMR] Checking for updates on the server...
24
26
[HMR] Updated modules:
25
27
[HMR] - ./example.js
@@ -28,3 +30,31 @@ In the devtools console you should see:
28
30
29
31
You should also see the text on the page itself change to match your edits in
30
32
` example.js ` .
33
+
34
+ ## --hot only
35
+
36
+ Enables Hot Module Replacement without page refresh as a fallback in case of build failures.
37
+
38
+ ``` console
39
+ npx webpack serve --open-target --hot only
40
+ ```
41
+
42
+ ## What Should Happen
43
+
44
+ 1 . The script should open ` http://localhost:8080/ ` in your default browser.
45
+ 2 . In your editor, open ` example.js ` and change ` const ` keyword to ` constt ` to cause build error.
46
+ 3 . Open the console in your browser's devtools.
47
+ 4 . Revert the change in step 2 and change any part of the ` innerHTML ` string.
48
+
49
+ In the devtools console you should see:
50
+
51
+ ```
52
+ [webpack-dev-server] App updated. Recompiling...
53
+ [webpack-dev-server] App hot update...
54
+ [HMR] Checking for updates on the server...
55
+ ⚠️ Ignored an update to unaccepted module ./example.js -> ./app.js
56
+ [HMR] Nothing hot Updated.
57
+ [HMR] App is up to date.
58
+ ```
59
+
60
+ 5 . Refresh the page and see the text on the page itself change to match your edits in ` example.js ` .
0 commit comments