2. webpack基础复习

1.什么是webpack和什么是gulp

gulp

gulp侧重于整个开发流程的控制，通过gulp配置文件配置不同的task，比如项目启动server、sass/less预编译等来让gulp实现不同的功能，从而构建整个前端开发流程

webpack

webpack更加侧重于模块打包，可以把项目中的所有资源看成模块，通过loader和plugin来对资源进行处理；详细一点就是分析项目目录找到不能被浏览器直接运行的扩展语言，将其打包处理成合适的格式供浏览器使用。

webpack构建流程

1. 初始化参数，从配置文件和shell语句中获取参数

2. 用得到的参数初始化一个compiler对象，加载所有配置插件，执行对象的run方法开始编译

3. 根据配置文件的entry确定所有入口文件

4. 编译模块：调用所有配置的loader对模块进行翻译，找出子模块，递归执行本操作

5. 完成模块编译：翻译完所有模块之后得到每个模块最终内容和他们之间的关系

6. 所有模块会以入口文件为单位进行分组即一个代码块（一个入口文件及其依赖的模块合并的结果）

7. 最后webpack会将所有的代码块转换成文件输出到出口文件，而且在整个构建过程中，webpack会在需要的时候执行plugin里面定义的逻辑，完成插件优化的内容

3. 热更新原理

热更新即不用刷新浏览器将新变更的模块替代旧的模块

核心部分：

1. 就是客户端从服务端拉取更新后的文件，在编译器和浏览器之间维护一个websocket，当本地资源发生变化时候，编译器会向浏览器推送更新，并且带上标识，与上一次的资源进行对比

2. 对比出差异之后，客户端会向编译器发送一个请求来获取更改后的内容列表和标识，进而获取代码块增量更新

3. 获取到增量更新之后由hotmoduleplugin来完成，根据相关的api和框架的render方法进行处理实现页面热更新

loader和plugin的不同

1. webpack只能解析js，loader可以对其他文件类型进行翻译使其拥有加载非js文件的能力

2.plugin 可以扩展webpack的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。