webpack原理之-打包流程&热更新HMR

webpack打包流程?

  1. 初始化: 启动构建,读取与合并配置参数,加载Plugin,实例化Compiler;

  2. 编译: 从 entry出发,针对每个 Module 串行调用对应的 loader 去翻译文件的内容,再找到该 Module 依赖的Module,递归地进行编译处理;

  3. 输出:将编译后的 Module 组合成 Chunk,将 Chunk 转换成文件,输出到文件系统中。

loader和plugin到底是什么呢?

loader即文件加载器:用来预处理文件。

plugin即插件:用来增强功能。

比如css-loader, 就是解析CSS文件,并处理CSS中的依赖关系,可以将css都提取出来,如果js中包含css代码,会为其创建一个css文件。

处理一个文件可以使用多个loader,loader的执行顺序和配置中的顺序是相反的,最后一个loader最先执行,第一个loader最后执行。

第一个执行的loader接受源文件作为参数内容,其他的loader接受前一个loader的返回值作为自己的参数,最后一个执行的loader会返回此模块的JavaScript源码。

loader即为文件加载器,操作的是文件,将文件A通过loader转换成文件B,是一个单纯的文件转化过程。

plugin即为插件,是一个扩展器,丰富webpack本身,增强功能 ,针对的是在loader结束之后,webpack打包的整个过程,它并不直接操作文件,而是基于事件机制工作,监听webpack打包过程中的某些节点,执行广泛的任务。

webpack 在编译代码过程中,会触发一系列 Tapable 钩子事件,插件所做的,就是找到相应的钩子,往上面挂上自己的任务,也就是注册事件,这样,当 webpack 构建的时候,插件注册的事件就会随着钩子的触发而执行了。

webpack热更新如何实现的?HMR

Hot Module Replacement,可以理解为模块热替换,指在应用程序运行的过程中,替换、添加、删除模块,而无需重新刷新整个应用。

具体过程如下:

1. webpack在watch模式下,利用webpack-dev-server 和 webpack 之间的接⼝交互,监听文件变化,如果更改内容,就会将变化的内容重新编译,存在内存里;

2. 通过 sockjs(webpack-dev-server 的依赖)在浏览器端和服务端之间建⽴⼀个 websocket ⻓连接,将 webpack 编译打包的各个阶段的状态信息告知浏览器端,同时也包括 Server 监听静态⽂件变化的信息。浏览器端根据这些 socket 消息进⾏不同的操作。服务端传递的最主要信息还是新模块的 hash 值,后⾯的步骤根据这⼀ hash 值来进⾏模块热替换;

3. HMR的 runtime 拿到了更新后的hash只,会向server端发送请求获取更新列表,然后再发送一次请求获取所有更新内容的代码;

4. 将新旧模块进行对比,决定是否更新,如果确定更新,就会检查模块之间的依赖关系,更新依赖引用;

5. 当HMR失败后,会触发live reload,刷新页面,获取最新的chunk。

  • 通过webpack-dev-server创建两个服务器:提供静态资源的服务(express)和Socket服务
  • express server 负责直接提供静态资源的服务(打包后的资源直接被浏览器请求和解析)
  • socket server 是一个 websocket 的长连接,双方可以通信
  • 当 socket server 监听到对应的模块发生变化时,会生成两个文件.json(manifest文件)和.js文件(update chunk)
  • 通过长连接,socket server 可以直接将这两个文件主动发送给客户端(浏览器)
  • 浏览器拿到两个新的文件后,通过HMR runtime机制,加载这两个文件,并且针对修改的模块进行更新
上一篇:数据挖掘|数据集成|基于Python的数据集成关键问题处理


下一篇:npm、nrm、nvm详解与应用