这是我参与「第五届青训营」伴学笔记创作活动的第 13 天。

一、什么是webpack

webpack本质上是一种前端资源编译、打包工具.它是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代应用程序的静态模块打包工具。

二、使用

1.入口处理

从entry文件开始,启动编译流程

2依赖解析

从entry文件开始，根据require or import等语句找到依赖资源

3.资源解析

根据module配置，调用资源转移器，将png、css 非杨标准JS资源转译为JS内容

4.资源合并打包

将转译后的资源内容合并打包为可直接在浏览器运行的JS文件

1 -多个文件资源合并成一个，减少http请求数

2 -支持模块化开发

3 -支持高级JS特性

4 -支持Typescript、CoffeeScript 方言5 -统一图片、CSS、字体等其它资源的处理模型

1.流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项

2.工具类:主流程之外，提供更多工程化能力的配置项

3.存在问题：webpack只认识JS

解决方法：为了处理非标准JS资源，设计出资源翻译模块—— Loader用于将资源翻译为标准JS

4.Loader其它特性：

链式执行支持异步执行

分normal、pitch两种模式

5.Webpack 本身的很多功能也是基于插件实现的

6.钩子的核心信息：

时机:编译过程的特定节点,Webpack 会以钩子形式通知插件此刻正在发生什么事情;上下文:通过tapable提供的回调机制,以参数方式传递上下文信息;

交互:在上下文参数对象中附带了很多存在side effect的交互接口,插件可以通过这些接口改变