Webpack 开发者指南

Question

Webpack 的整个打包流程可以大致分为初始化打包器、解析和加载模块、生成和优化 chunk、生成和输出资源文件这几个过程，然而webpack的官方文档对开发者很不友好。在此，笔者按照专有名词在整个打包流程中出现的顺序人肉总结了一下，希望能有所帮助：

options

• 顾名思义，webpack的配置信息，由用户定义的配置和webpack提供的默认配置合并之后生成。webpack的处理非常丰富。例如, defaulter中存储 output.path 的方式为this.set('output.path', ''); 此外，options 的每个配置项，实际上是有对应的写入规则来控制其行为的，包括 call、append、undefined 三种，如果是 undefined 类型的规则，则是直接取字面量。
• options的标准形式是对象。但是options可以给出数组，这样相当于定义了多份打包任务，并且数组可以嵌套。

Tapable

• webpack定义的一个可以定义插件，以及拥有丰富的插件执行方法的类，继承此类就可以拥有插件功能。
• webpack中定义的插件一般而言是生命周期钩子。
• 有人给了个Tapable中文文档

Compiler < Tapable

• 可以认为是打包的任务单位。数量由options决定，如果有多个互相之间是独立的。compiler把一次打包任务划分成了几个部分: make, seal, emit。
• compiler持有下述对象:
  • resolvers { normal, loader, context }
  • parser
  • compilation
• compiler在如下阶段有插件点 (this = compiler):
  • entry-option == 用户定义的插件加载完后，供修改entry: (options.context, options.entry)
  • after-plugins == 内建插件初始化结束：(compiler)
  • after-resolvers == resolver加载结束: (resolvers)
  • environment == 将封装过的node fs模块传递给compiler对象之后: (void)
  • after-environment == 紧跟上一个:(void)
  • run == 开始执行，实际上就是记录了一个startTime: async, (compiler)
  • compile ==

NormalModuleFactory, ContextModuleFactory < Tapable

plugin

• 只要继承了 Tapable，就有插件功能
• webpack的插件在加载时分内建和用户定义的, 用户的先加载。