webpack基本概念、打包流程和热更新原理

标签：消息   调用   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）

webpack基本概念、打包流程和热更新原理

标签：消息   调用   run方法   spl   就是   启动服务   update   module   pat   

原文地址：https://www.cnblogs.com/mengff/p/12590406.html