Hot Module Replacement是webpack下实现热刷新的模块，由于webpack的坑爹文档，看了很久才搞明白这东西怎么用。

Webpacks adds a small HMR runtime to the bundle, during the build process, that runs inside your app. When the build completes, Webpack does not exit but stays active, watching the source files for changes. If Webpack detects a source file change, it rebuilds only the changed module(s). Depending on the settings, Webpack will either send a signal to the HMR runtime, or the HMR runtime will poll webpack for changes. Either way, the changed module is sent to the HMR runtime which then tries to apply the hot update. First it checks whether the updated module can self-accept. If not, it checks those modules that have required the updated module. If these too do not accept the update, it bubbles up another level, to the modules that required the modules that required the changed module. This bubbling-up will continue until either the update is accepted, or the app entry point is reached, in which case the hot update fails.在构建时，webapck添加一个小的HMR实例到bundle内部，当构建完成后，webpack不再存在但保持监控源文件。如果webpack检测到文件变化，会重新构建被改变的文件。根据设置，webpack要么发送一个信号给HMR实例，要么检查webpack的变化。另外，被改变的模块被发送到HMR runtime，用来做热替换。首先检查，被更新的模块能否self-accept【指是否被HMR跟踪】?

From the app view

The app code asks the HMR runtime to check for updates. The HMR runtime downloads the updates (async) and tells 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).app询问HMR实例是否有更新。如果有更新，HMR实例会异步下载更新代码，并通知app已经准备就绪。app源码请求HMR实例开始更新。HMR实例同步更新。app可以选择是否和用户交互。

From the compiler(webpack) view

待续。。。

参考资料：

【1】官方文档

【2】官方wiki

【3】同事的总结

关键字：JavaScript, react.js, webpack, hmr

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！