标签:消息 调用 run方法 spl 就是 启动服务 update module pat
webpack基本概念
1. webpack中的module,chunk 和 bundle
module 就是一个js模块,就是被require或export的模块,例如 ES模块,commonjs模块,AMD模块
chunk 是 代码块,是进行依赖分析的时候,代码分割出来的代码块,包括一个或多个module,是被分组了的module集合,code spliting之后的就是chunk
bundle 是 文件,最终打包出来的文件,通常一个bundle对应一个chunk
2. webpack中loader和plugin在作用
loader是文件转换器,将webpack不能处理的模块转换为webpack能处理的模块,就是js模块
plugin是功能扩展,干预webpack的打包过程,修改编译结果或打包结果
webpack打包流程
1. 生成options (将webpack.config.js和shell中的参数,合并中options对象)
2. 实例化complier对象 (webpack全局的配置对象,包含entry,output,loader,plugins等所有配置信息)
3. 实例化Compilation对象 (compiler.run方法执行,开始编译过程,生成Compilation对象)
4. 分析入口js文件,调用AST引擎(acorn)处理入口文件,生成抽象语法树AST,根据AST构建模块的所有依赖
5. 通过loader处理入口文件的所有依赖,转换为js模块,生成AST,继续遍历,构建依赖的依赖,递归,直至所有依赖分析完毕
6. 对生成的所有module进行处理,调用plugins,合并,拆分,生成chunk
7. 将chunk生成为对应bundle文件,输出到目录
webpack热更新的原理
基本原理,webpack监听文件变化,服务端和客户端有websocket通信,服务端想客户端发送文件变化消息,
客户端根据文件变化消息获取变更模块代码,进行模块代码的热替换
1. webpack-dev-server通过express启动服务端
2. 客户端通过sockjs和服务端建立websocket长连接
3. webpack监听文件变化,文件保存触发webpack重新编译,编译后的代码保存在内存中,不在output.path中产生输出
4. 编译会生成hash值,hot-update.json(已改动模块的json),hot-update.js(已改动模块的js)
5. 通过socket想客户端发送hash值
6. 客户端对比hash值,一致在走缓存,不一致则
通过ajax获取hot-update.json,json包含模块hash值
再通过jsonp请求获取hot-update.js
7. 热更新js模块,若失败,则live reload刷新浏览器代替热更新(若模块未配置热更新,则同样live reload)
标签:消息 调用 run方法 spl 就是 启动服务 update module pat
原文地址:https://www.cnblogs.com/mengff/p/12590406.html