Code configuration

Set devServer.hot to true in the webpack.config.js file to enable the HMR feature. In addition to use HMR features are also need to configure the HotModuleReplacementPlugin plug-in. If you don’t want to configure this plugin, you can also in webpack dev – added – hot the parameter server startup, such HotModuleReplacementPlugin plugin will automatically be configured.

Ask yourself questions

  1. While developing with WebPack HMR, instead of looking for wegPack packed files in the Dist directory, where did they go?
  2. What role does Webpack-dev-Middleware play as a dependency in webpack-dev-server?
  3. I know from Chrome developer tools that the browser communicates with webSocket and webpack-dev-server, but I didn’t find any new module code in WebSocket and Message. How does the packaged new module get sent to the browser? Why isn’t the new module sent to the browser with the message via Websocket?
  4. Is there a fallback mechanism if the module fails to be replaced during hot replacement?

Responsibilities of each module

  1. Webpack
    1. In WebPack’s Watch mode, when a file in the file system changes, WebPack listens for the file change, recompiles and packages the module according to the configuration file, and saves the packaged code in memory through simple JavaScript objects.
    2. The work of webpack/hot/dev-server depends on the information passed to it by webpack-dev-server/client and the configuration of dev-server to decide whether to refresh the browser or update the module hot.
  2. webpack-dev-server
    1. Depends on the interaction between Webpack-dev-middleware and Webpack. Webpack-dev-middleware calls the interface exposed by Webpack to monitor code changes and tells Webpack to pack code into memory.
    2. Webpack-dev-server /client cannot request updated code and does not perform hot update module operations, leaving the work to Webpack.
    3. Webpack-dev-server communicates with webpack-dev-server/client (on the browser side) through SockJS for websocket communication.
  3. HotModuleReplacementPlugin
    1. HMRPlugin runtime is the centre of the client HMR, step on it receives to the hash values of its new modules, through JsonpModuleTemplate. Runtime to webpack dev – sends an ajax request server end, The server returns a JSON that contains the hash values of all modules to be updated. After obtaining the updated list, the module retrieves the updated module code again through JSONP.
    2. HotModuleReplacementPlugin will of and comparison between the old and the new module to decide whether to update module, after decided to update module, check module dependencies between, update module colleagues update module dependencies between references.
    3. When HMR fails, fall back to live Reload, which is a browser refresh to get the latest packaging code.

Specific steps

Image source:Webpack HMR principle analysis – Zhihu

  1. Webpack, in Watch mode, listens on the file system and packages files into memory.
  2. When webpack-dev-server detects file changes, it communicates with sockJS webSocket to notify the browser of the changes.
  3. Webpack-dev-server adds the code for webpack-dev-server/client to the bundle. Webpack-dev-server /client receives the message from webpack-dev-server. Procedure According to the HOT configuration, whether to refresh the page or perform hot update.
  4. For hot updates, notify webpack/hot/dev-server using webpack/hot/ Emitter. Call webpack/lib/HotModuleReplacementPlugin runtime check method, check for updates.
  5. During the check procedure, two methods are called: HotDownloadManifest (ajax calls to the server to request updated files based on the previous hash value) and hotDownloadUpdateChunk (jSONP requests the latest module code if there is an update, And returns the code to the HMR Runtime. The HMR Runtime does further processing based on the code returned for the new module, either by refreshing the page or by hot updating the module.
  6. Hmr. Runtime hot update module, this step is key. Chief among them is the hotApply method.
    1. In the first stage, find outdateModules and outdatedDependencies
    2. Delete the cache corresponding to the module
    3. Delete the dependency of the module
    4. Add the module to modules, and the next time you call the webpack_require method, you get the new module code.
    5. Update module cache
    6. If an error occurs during the process, hot updates fall back to refreshing the browser.
  7. What does the business code need to do? When the old module is replaced with new module code, our business code does not know that the module code has changed. We need to add the module’s update handler to the accept method of the HMR in the index.js file, and insert the return value of the Hello method into the page in time.
    1. Call the react-hot-loader hot method to wrap the topmost App component: hot(Module)(App).

Cover image by James Harrison on Unsplash