webpack小结

一、webpack主要组成部分

loader: 主要用于实现资源模块化加载,实现整体文件的打包编译,例如html-loader,css-loader,babel-loader(用于转译es5以上版本的js语法)
plugins: 主要用于解决除了资源加载以后的工作,例如 :new ClearnWepackPlugin() 清除打包目录文件,在生成新的打包文件

webpack打包以及开发服务器
1.webpack —watch + browser-sync
webpack + browser-sync 采用的是先使用yarn webpack 或者npm run build 打包以后启动browser-sync服务器的模式实现代码更新
优点:可以对打包后的文件实时监听,实现代码更新视图改变的效果
缺点:

1. 操作繁琐,要同时使用2次命令来编译代码
2. 虽然也实现了热更新的效果,但是每次修改代码都会重新打包,每次编译都涉及到了磁盘读写操作,如果文件较大等待时间较长, 开发效率降低

2.webpack-dev-server
webpack-dev-server集成了自动编译和自动刷新浏览器的功能,可以启动httpserver对现有代码进行实时编译,达到热更新的效果,特别是开启HMR之后更改样式和更改js代码不会刷新浏览器只会更新局部代码(js需要手动配置对应模块才能实现不刷新)

优点:操作简单,,而是将打包结果暂时存放在内存当中,不需要进行磁盘读写操作,大大的提高了开发效率已经更新时间速度,内部的http服务只需要把这些代码读出来,呈现在浏览器即可
缺点(没有开启HMR之前):实时更新带来便捷的同时普遍的存在一个问题,那就是现有的操作都会呗浏览器刷新所清除,比如你在搜索框输入100个查询关键词,通过搜索得到了结果,结果发现你的代码有问题,需要修改查询方法,此时修改完,你的所有现有的操作都会被更新.需要重新再来

二、webpack源码小结

1. tapable工作流程

• 实例化hook注册事件监听
• 通过hook触发事件监听
• 执行懒编译生成的可自行代码

2.hook

• hook：普通钩子，监听器之间互不干扰
• BailHook：熔断钩子，某个监听返回非undefined时后续不执行
• WaterfallHook：瀑布钩子，上一个监听的返回值可传递下一个
• LoopHook：循环钩子，如果当前未返回false则一直执行（如果当前的监听器所对应的函数返回的是一个非undfined那他就会一直循环的执行钩子，并且是从头开始执行）