Skip to content

Commit 6afbe99

Browse files
committed
Fix grammar/clarify concepts in the Hot Module Replacement page
1 parent 63d8c63 commit 6afbe99

File tree

1 file changed

+56
-21
lines changed

1 file changed

+56
-21
lines changed

content/concepts/hot-module-replacement.md

Lines changed: 56 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,52 +6,87 @@ contributors:
66
- sokra
77
---
88

9-
Hot Module Replacement (HMR) exchanges, adds, or removes modules while an
10-
application is running without a page reload. You basically can update changed modules without a full page reload.
9+
Hot Module Replacement (HMR) exchanges, adds, or removes
10+
[modules](/concepts/modules/) while an application is running without a
11+
page reload. This allows you to speed up development time by updating
12+
individual modules when they are changed without refreshing the page.
1113

1214
## How Does It Work?
1315

1416
### From The App View
1517

16-
The app code asks the HMR runtime to check for updates. The HMR runtime downloads the updates (async) and tell the app code that an update is available. The app code asks the HMR runtime to apply updates. The HMR runtime applies the update (sync). The app code may or may not require user interaction in this process (you decide).
18+
1. The app code asks the HMR runtime to check for updates.
19+
2. The HMR runtime downloads the updates (asynchronously) and tells the app
20+
code that an update is available.
21+
3. The app code then asks the HMR runtime to apply the updates.
22+
4. The HMR runtime applies the update (synchronously).
23+
24+
You can set up HMR so that this process happens automatically, or you can
25+
choose to require user interaction for updates to occur.
1726

1827
### From The Compiler (webpack) View
1928

20-
In addition to the normal assets the compiler need to emit the "Update" to allow updating from previous version to this version. The "Update" contains two parts:
29+
In addition to the normal assets, the compiler needs to emit an "update"
30+
to allow updating from previous version to the new version. The "update"
31+
consists of two parts:
2132

22-
1. the update manifest (JSON)
23-
2. one or multiple update chunks (JavaScript)
33+
1. The update manifest (JSON)
34+
2. One or more update chunks (JavaScript)
2435

25-
The manifest contains the new compilation hash and a list of all update chunks (2.).
36+
The manifest contains the new compilation hash and a list of all update chunks.
2637

27-
The update chunks contain code for all updated modules in this chunk (or a flag if a module was removed).
38+
Each update chunk contains code for all updated modules in the respective chunk
39+
(or a flag if a module was removed).
2840

29-
The compiler addtionally makes sure that module and chunk ids are consistent between these builds. It uses a "records" json file to store them between builds (or it stores them in memory).
41+
The compiler addtionally makes sure that module IDs and chunk IDs are consistent
42+
between these builds. It stores these IDs in a "records" JSON file or in memory.
3043

3144
### From The Module View
3245

33-
HMR is an opt-in feature that affects only modules containing HMR code. You can consider patching styling through style-loader as a good example. To make this work, style-loader implements the HMR interface. Implementing it you describe what should happen when a module is updated. In this case we simply replace the styling with the one received through HMR.
46+
HMR is an opt-in feature that only affects modules containing HMR code. One example
47+
would be patching styling through the [style-loder](https://github.com/webpack/style-loader).
48+
In order for patching to work, style-loader implements the HMR interface; when it
49+
receives an update through HMR, it replaces the old styles with the new ones.
3450

35-
In most cases it's not mandatory to write HMR code in every module. If a module has no HMR handlers the update bubbles up. This means a single handler can handle an update to a complete module tree. If a single module in this tree is updated, the complete module tree is reloaded (only reloaded not transferred).
51+
Similarly, when implementing the HMR interface in a module, you can describe what should
52+
happen when the module is updated. However, in most cases, it's not mandatory to write
53+
HMR code in every module. If a module has no HMR handlers, the update bubbles up. This
54+
means that a single handler can handle an update to a complete module tree. If a single
55+
module in this tree is updated, the complete module tree is reloaded (only reloaded,
56+
not transferred).
3657

3758
### From The HMR Runtime View (Technical)
3859

39-
For the module system runtime additional code is emitted to track module `parents` and `children`.
40-
41-
On the management side the runtime supports two methods: `check` and `apply`.
60+
For the module system runtime, additional code is emitted to track module `parents` and `children`.
4261

43-
A `check` does a HTTP request to the update manifest. When this request fails, there is no update available. Elsewise the list of updated chunks is compared to the list of currently loaded chunks. For each loaded chunk the corresponding update chunk is downloaded. All module updates as stored in the runtime as update. The runtime switches into the `ready` state, meaning an update has been downloaded and is ready to be applied.
62+
On the management side, the runtime supports two methods: `check` and `apply`.
4463

45-
For each new chunk request in the ready state the update chunk is also downloaded.
64+
A `check` makes an HTTP request to the update manifest. If this request fails,
65+
there is no update available. If it succeeds, the list of updated chunks is compared
66+
to the list of currently loaded chunks. For each loaded chunk, the corresponding
67+
update chunk is downloaded. All module updates are stored in the runtime.
68+
When all update chunks have been downloaded and are ready to be applied, the runtime
69+
switches into the `ready` state.
4670

47-
The `apply` method flags all updated modules as invalid. For each invalid module there need to be a update handler in the module or update handlers in every parent. Else the invalid buddles up and marks all parents as invalid too. This process continues until no more "bubble up" occurs. If it bubbles up from an entry point the process fails.
71+
The `apply` method flags all updated modules as invalid. For each invalid module,
72+
there needs to be an update handler in the module or update handlers in its parent(s).
73+
Otherwise, the invalid flag bubbles up and marks its parent(s) as invalid too. Each bubble
74+
continues until the app's entry point or a module with an update handler is reached
75+
(whichever comes first). If it bubbles up from an entry point, the process fails.
4876

49-
Now all invalid modules are disposed (dispose handler) and unloaded. Then the current hash is updated and all "accept" handlers are called. The runtime switches back to the `idle` state and everything continues as normal.
77+
Afterwards, all invalid modules are disposed (via the dispose handler) and unloaded.
78+
The current hash is then updated and all "accept" handlers are called. The runtime
79+
switches back to the `idle` state and everything continues as normal.
5080

5181
## What can I do with it?
5282

53-
You can use it in development as a LiveReload replacement. webpack-dev-server supports a hot mode which tries to update with HMR before trying to reload the whole page. See how to implement [HMR with React](/guides/hmr-react) for example.
83+
You can use it in development as a LiveReload replacement.
84+
[webpack-dev-server](/configuration/dev-server/) supports a
85+
hot mode in which it tries to update with HMR before trying to reload the whole page. See how
86+
to implement [HMR with React](/guides/hmr-react) as an example.
5487

55-
Some loaders already generate modules that are hot-updateable. i.e. the `style-loader` can exchange the stylesheet. You don't need to do anything special.
88+
Some loaders already generate modules that are hot-updateable. For example, the `style-loader`
89+
can swap out a page's stylesheets. For modules like this, you don't need to do anything special.
5690

57-
webpack's power lies in its customizability, and there are *many* ways of configuring HMR given the needs of a particular project.
91+
webpack's power lies in its customizability, and there are *many* ways of configuring HMR
92+
depending on the needs of a particular project.

0 commit comments

Comments
 (0)