webpack热更新原理图
2022-01-09 22:38:02 0 举报test
作者其他创作
大纲/内容
watch模式启动编译
创建http服务器
accept
静态文件中间件
webpack-dev-middle
执行accept的回调
保存currentHash
check
ok事件
socket
编译完成触发done
从缓存中删除旧模块
new Server(complier)
通过jsonp拉取最新代码chunk.lastHash.hot-update.js
localhost:8080/
执行回调
hash
HotModuleReplacementPlugin
createSocketServer
调用render方法进行热更新
hotAddUpdateChunk
hotDownloadUpdateChunk
重新编译
添加done事件回调
http服务器
app.use
index.html
hotCheck
setupApp
创建express实例
创建websocket服务器
reloadApp
webSocket服务器
createServer
浏览器
文件系统
监听
jsonp执行代码
读取
注入运行时代码HotModuleReplacementPlugin.runtime
ok
生成hot-update.js
updateComplier
webpackHotUpdate
hotApply
访问main.js
内存文件系统
连接websocket服务器器
hotDownloadManifest
向entry中注入代码
hash事件
编译结果输出
src/index.js
发送ajax请求拉取lastxx.hot-updat.json
setupHooks
webpack(config)
webpack-dev-server/client/index.js
complier
文件变更重新编译
触发事件
热更新
动态更新模块代码
hotModuleReplacementPlugin.runtime
complier.watch
输出
module.hot.check
监听done事件
setupDevMiddleWare
创建webpack-dev-middle-ware
emit('webpackHotUpdate')
webpack/hot/dev-server
on('webpackHotUpdate')
生成hot-update.json
收藏
0 条评论
下一页
