编译:

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

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

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

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

plugin即为插件是一个扩展器丰富webpack本身增强功能

针对的是在loader结束之后webpack打包的整个过程它并不直接操作文件而是基于事件机制工作监听webpack打包过程中的某些节点执行广泛的任务。

webpack

钩子事件插件所做的就是找到相应的钩子往上面挂上自己的任务也就是注册事件这样当

webpack

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

webpack在watch模式下利用webpack-dev-server

webpack

之间的接⼝交互监听文件变化如果更改内容就会将变化的内容重新编译存在内存里

websocket

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

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

当HMR失败后会触发live

通过webpack-dev-server创建两个服务器提供静态资源的服务express和Socket服务express

server

负责直接提供静态资源的服务打包后的资源直接被浏览器请求和解析socket

server

监听到对应的模块发生变化时会生成两个文件.jsonmanifest文件和.js文件update

server

可以直接将这两个文件主动发送给客户端浏览器浏览器拿到两个新的文件后通过HMR