webpack

• 打包结果

1. 是一个IIFE，一般被称为webpackBootstrap。接受一个对象modules作为参数，modules对象的key是依赖路径，value是经过处理后的脚本。
2. 打包结果中定义了模块加载函数__webpack_require__。
3. 首先使用模块加载函数__webpack_require__去加载入口模块。
4. 加载函数__webpack_require__使用了闭包变量installedModules，它的作用是将已加载过的模块结果保存在内存中。
5. 思考：按需加载如何实现

• 工作基本原理

1. 读取配置
2. 将所需的webpack插件实例化，在webpack事件流上挂载插件钩子。
3. 从入口文件开始，进行依赖收集，对所有依赖的文件进行编译，此编译过程依赖loaders。编译好的内容生成抽象语法树，分析文件依赖关系，将不同模块化语法等替换为webpack自己的加载器进行模块化实现。
4. 产出结果，将结果打包到对应目录。
5. 注意点：在整个打包过程中，采用的是基于事件流的发布/订阅模式，监听某些关键过程，并在这些环节中执行插件任务。

• 概念

1. 抽象语法树：以树状的形式表现变成语言的语法结构。
2. compiler对象：它的实例包含了完整的webpack配置，且全局只有一个compiler实例。当插件被实例化的时候，就会收到一个compiler对象，通过这个对象可以访问webpack的内部环境。
3. compilation对象：所有构建过程中产生的构建数据都会被存储在该对象中，包括当前的模块资源，编译生成资源等，还提供了很多事件回调。当webpack以开发模式运行时，每当检测到文件变化时，一个新的compilation对象就会被创建。
4. loader: 接收源文件，对源文件进行处理，并返回编译后的文件。

• 单一原则。一个源文件可能要进行多步转换。
• 链式顺序执行。从右往左。
• 本质是函数。 

   5.plugin：拓展器，基于事件机制工作。

• compiler暴露的事件钩子。

• 通过compiler插入指定的事件钩子，并在钩子回调中获取compilation对象。

• 使用compilation修改webpack打包的内容。

• 拓展

1. tapable库
2. Rollup