构建流程

https://segmentfault.com/a/1190000017890529

webpack是一个打包器,将多种不同格式的文件打包到一起。 核心事件库是Tapable

初始化阶段

  1. 初始化参数,从配置文件和shell中获取最终参数
  2. 初始化,根据参数创建compiler对象,加载注册所有配置的插件(compiler.apply(plugin))。

编译阶段

  1. 开始构建,执行run钩子,创建全新的compilation对象(上下文对象,包含了本次构建的全部资源信息)。
  2. 触发make钩子,从entry开始读取文件,根据文件类型用对应的loader进行编译,然后递归找出该文件依赖的文件进行编译。
  3. 根据入口和依赖的关系,组装成包括多个模块的chunk,再将chunk加入输出列表中。

输出阶段

  1. 触发emit相关的钩子根据output配置,生成最终文件

一般参数

  • entry: 执行入口
  • output:所有依赖的模块,合并输出到的地方
  • resolve: resolve.alias,文件路径指向,可以加快打包过程
  • module:module.loaders[],各种loader
  • plugins:各种插件,在webpack事件流中执行

Compiler 和 Compilation

Compiler 模块是 webpack 的主要引擎,它通过 CLI 或者 Node API 传递的所有选项创建出一个 compilation 实例。 它扩展(extends)自 Tapable 类,用来注册和调用插件。 大多数面向用户的插件会首先在 Compiler 上注册。

Compilation 模块会被 Compiler 用来创建新的 compilation 对象(或新的 build 对象)。 compilation 实例能够访问所有的模块和它们的依赖(大部分是循环依赖)。 它会对应用程序的依赖图中所有模块, 进行字面上的编译(literal compilation)。 在编译阶段,模块会被加载(load)、封存(seal)、优化(optimize)、 分块(chunk)、哈希(hash)和重新创建(restore)。