An article by Stanimira Vlaeva about Hot Module Replacement with webpack. webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser.
Webpack supports a feature called Hot Module Replacement (HMR). HMR exchanges, adds, or removes modules while an application is running, without a full reload. This is significantly faster because the user session is persisted.
Webpack has three closely related terms - module, chunk, and bundle. A module is a piece of JS code that encapsulates data and provides functionality. Modules can depend on one another and thus, form a dependency graph. In the webpack bundling process, a few modules form a chunk. A bundle is an output file, produced by the bundling process. In most cases, each chunk emits exactly one bundle.
However, HMR doesn’t magically reload your app when you change the code. The application itself must know how to react to the incoming changes. Let’s take a closer look at the HMR process.
- When you make a change, the webpack compiler is responsible for generating a ‘diff’ (hot update) between the old version of the bundle and the new one.
- The webpack development server handles the transportation logistics for HMR.
- A special code, injected into your application bundle, fetches the hot update.
- The module is replaced if an appropriate handler is found.
Video demonstrating difference between Hot Module Replacement and traditional mobile application development cycle is also included. Nice one!
[Read More]