美文网首页
webpack热更新原理

webpack热更新原理

作者: Riya | 来源:发表于2021-08-16 08:51 被阅读0次
开启

在devServer中添加hot: true字段,webpack会自动添加HotModuleReplacementPlugin

原理

有三个角色: 本地文件、服务器端、浏览器端
第一步
webpack对文件进行监听(watch),当文件发生变化时,webpack dev server对文件进行重新打包编译
第二步
由sockjs在服务器端和浏览器端开启一个websocket长连接,将webpack 热更新阶段各阶段的状态告知浏览器。当编译完成后,将编译打包后的新模块的hash值发送到浏览器端
第三步
浏览器端接收hash值,并对其作出响应。浏览器端接收到类型为hash的消息后,将hash值暂存起来。浏览器接收到类型为ok的消息后,根据devServer中hot配置,决定是进行刷新操作还是热更新操作
第四步
HMR runtime验证hash值,并请求新的模块代码
第五步
HMR runtime对模块进行热更新,并且模块热更新操作都是发生在HMR runtime中的hotApply方法中
总结
当开启热更新后,启动本地服务时,会开启一个websocket长连接,当代码发生变化时,通过websocket进行通信,将变化的代码推送到浏览器端进行自动更新。

相关文章

  • webpack热更新原理

    开启 在devServer中添加hot: true字段,webpack会自动添加HotModuleReplacem...

  • webpack热更新原理

    现在前端脚手架盛行,直接集成了包管理和打包工具,目前最流行的打包工具依然是webpack。当你起了dev-serv...

  • Webpack 热更新实现原理分析

    概述 在使用 Webpack 构建开发期时,Webpack 提供热更新功能为开发带来良好的体验和开发效率,那热更新...

  • webpack 热更新原理解析

    概念作用webpack Compile将 JS 编译成 BundleBundle Server提供文件在浏览器端以...

  • 轻松理解webpack热更新原理

    苍耳mtjj https://juejin.im/post/5de0cfe46fb9a071665d3df0[ht...

  • webpack和vite对比

    热更新时webpack做了什么 总的来说,webpack的热更新就是,当我们对代码做修改并保存后,webpack会...

  • webpack热更新

    我们在用webpack打包文件,如果打包出来的资源是带有哈希值,每打一次包,就会出现一个不同哈希值的文件。为了避免...

  • webpack 热更新

    热更新,是指 Hot Module Replacement,缩写为 HMR。 如果模块发生变化,即便这个模块已经在...

  • webpack热更新

    使用webpack可帮助我们的开发以及打包,在开发过程中,有时候我们只修改了部分代码并想不必刷新整个页面即可看到更...

  • webpack 热更新

    代码地址请戳这里 HMR 是什么? Hot Module Replacement 即模块热替换,是指当你的代码修改...

网友评论

      本文标题:webpack热更新原理

      本文链接:https://www.haomeiwen.com/subject/avfmbltx.html