webpack hot-module-replacement 原理&踩坑

webpack hot-module-replacement 原理&踩坑

原由

最近在作san框架的热更新，记录一下webpack HMR的原理和小坑。

什么是HMR？

热更新是webpack的一个特性，经过无刷新实现代码更新。

在HMR以前，大多数开发体验是live reload，保存后自动刷新浏览器，已是比刀耕火种的年代强不少了，可是自从某天在油管上看到dan神的redux时间穿梭，瞬间被惊艳到（固然，HMR已是这以前好久就出现了）。

HMR大幅提升了开发体验，只更新变动内容，调整样式迅速，避免了大部分的网络请求、浏览器从新渲染、app解析编译显示，让咱们来看下他是如何作到的。

hmr基本法

概念

compile: webpack的核心。js编译、拆包。
hmr-server: 创建链接并完成模块热更新的推送。
bundle-server: 静态服务器。
bundle.js: client端。
hmr-runtime: 注入到bundle.js中的代码。

更新流程

热更新开启后，当webpack打包时，会向client端注入一段HMR runtime代码，同时server端（webpack-dev-server或是webpack-hot-middware）启动了一个HMR服务器，它经过websocket和注入的runtime进行通讯。

当webpack检测到文件修改后，会从新构建，并经过ws向client端发送更新消息，浏览器经过jsonp拉取更新过的模块，回调触发模块热更新逻辑。

1.修改了一个或多个文件。
2.文件系统接收更改并通知Webpack。
3.Webpack从新编译构建一个或多个模块，并通知HMR服务器进行了更新。
4.HMR Server使用websockets通知HMR Runtime须要更新。HMR运行时经过HTTP请求这些更新（jsonp）。
5.HMR运行时替换更新中的模块，若是肯定这些模块没法更新，则触发整个页面刷新（这是个大坑。。）。

坑

触发页面刷新

// webpack/hot/dev-server
if(module.hot) {
    var lastHash;
    //__webpack_hash__是每次编译的hash值是全局的
    //Only available with the HotModuleReplacementPlugin or the ExtendedAPIPlugin
    var upToDate = function upToDate() {
        return lastHash.indexOf(__webpack_hash__) >= 0;
    };
    var check = function check() {
   // check([autoApply], callback: (err: Error, outdatedModules: Module[]) => void
   // If autoApply is truthy the callback will be called with all modules that were disposed. apply() is automatically called with autoApply as options parameter.(传入哪些代码已经被更新的模块)
   //If autoApply is not set the callback will be called with all modules that will be disposed on apply(). （不是true那么传入的是哪些须要被apply处理的模块）
        module.hot.check(true).then(function(updatedModules) {
            //检查全部要更新的模块，若是没有模块要更新那么回调函数就是null
            if(!updatedModules) {
                console.warn("[HMR] Cannot find update. Need to do a full reload!");
                console.warn("[HMR] (Probably because of restarting the webpack-dev-server)");
                window.location.reload();
                return;
            }
            //若是还有更新
            if(!upToDate()) {
                check();
            }
            require("./log-apply-result")(updatedModules, updatedModules);
            //已经被更新的模块都是updatedModules
            if(upToDate()) {
                console.log("[HMR] App is up to date.");
            }

        }).catch(function(err) {
            var status = module.hot.status();
            //若是报错直接全局reload
            if(["abort", "fail"].indexOf(status) >= 0) {
                console.warn("[HMR] Cannot apply update. Need to do a full reload!");
                console.warn("[HMR] " + err.stack || err.message);
                window.location.reload();
            } else {
                console.warn("[HMR] Update failed: " + err.stack || err.message);
            }
        });
    };
    var hotEmitter = require("./emitter");
    //获取MyEmitter对象
    hotEmitter.on("webpackHotUpdate", function(currentHash) {
        lastHash = currentHash;
        if(!upToDate() && module.hot.status() === "idle") {
            //调用module.hot.status方法获取状态
            console.log("[HMR] Checking for updates on the server...");
            check();
        }
    });
    console.log("[HMR] Waiting for update signal from WDS...");
} else {
    throw new Error("[HMR] Hot Module Replacement is disabled.");
}

正常状况下，hmr只会更新模块，不会触发页面刷新。

可是当bundle.js中的代码抛出异常时，若是开发者没有手动接收并处理，这个错误会冒泡到webpack-hmr-runtime中。

runtime接收error后会console.log一些信息并当即刷新，一般状况下是没办法看到那些log的，由于太快了。

// vue-hot-reload-api.js
// 不得不说，这个一开始确实没搞懂是为啥要包一层
// 本身实现的时候才知道，当有error弹出时
// 若是不手动这样接住error，webpack会接到而后当即location.reload()
// 根原本不及看reload以前给出的提示
// 因此要手动处理下error
function tryWrap (fn) {
  return function (id, arg) {
    try { fn(id, arg) } catch (e) {
      console.error(e)
      console.warn('Something went wrong during Vue component hot-reload. Full reload required.')
    }
  }
}

因此开发者须要自定义一个相似的高阶函数手动处理下错误，防止看不到错误信息而刷新。

反作用

模块的热更新是好事，可是老模块仍然有可能在client端留下了痕迹。试想一个组件被热更新后，若是不处理以前的组件，那么新老两个组件都会在浏览器中出现。

因此别忘了在module.hot.accept中清除掉旧的组件。
相似的问题还有不少，事件绑定、手动插入而且没有销毁的dom、定时器等，记得把这些反作用一块儿干掉。

若是作不到的话，老老实实刷新你的浏览器吧。

参考

webpack官方文档


Understanding Webpack HMR

webpack-dev-server原理分析与HMR实现