[前端进阶课] 构建自己的 webpack 知识体系 (5)

模块热更新的错误处理,如果在热更新过程中出现错误,热更新将回退到刷新浏览器,这部分代码在 dev-server 代码中,简要代码如下:

module.hot.check(true).then(function(updatedModules) { if(!updatedModules) { return window.location.reload(); } // ... }).catch(function(err) { var status = module.hot.status(); if(["abort", "fail"].indexOf(status) >= 0) { window.location.reload(); } }); 第六步:业务代码需要做些什么?

当用新的模块代码替换老的模块后,但是我们的业务代码并不能知道代码已经发生变化,也就是说,当 hello.js 文件修改后,我们需要在 index.js 文件中调用 HMR 的 accept 方法,添加模块更新后的处理函数,及时将 hello 方法的返回值插入到页面中。代码如下

// index.js if(module.hot) { module.hot.accept('./hello.js', function() { div.innerHTML = hello() }) } 最后

觉得有用的请点个赞

本文内容出自 https://github.com/zhongmeizhi/FED-note

欢迎关注公众号「前端进阶课」认真学前端,一起进阶。

[前端进阶课] 构建自己的 webpack 知识体系

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zygsyy.html