Webpack 的主要对象

Question

Webpack 里面的对象，只要是单例（或者实例数目只跟 option 挂钩），都可以定义 plugin。

compiler

一般而言，webpack 的配置文件是一个对象。但是，Webpack 的配置文件是可以给出数组的，并且可以嵌套。当给出数组的时候，就定义了多个构建任务了。每个 Webpack 的构建任务对应一个 compiler 实例，互相之间独立，其执行方式是 async.map。

自身将处理如下流程:

• 结合用户和默认配置初始化 option
• 先加载 option 中定义的插件，再加载内建插件
• emit 过程，负责输出文件

compilation

webpack 的编译任务的真正执行者。

自身会处理如下流程：

• addEntry：调用方法将 entry 转化为 Dependency 并转化为 module
• seal：实现 modules ==> chunks ==> assets， 过程中会调度 plugin 执行优化，包括给出 hash

xxModule（不支持插件，但 compilation 上某些插件会在某些方法中被触发）

webpack 会有不同的 module，不过他们不是根据文件类型分的，而是根据模块所属依赖类型（是否是 dll，multiple，normal 等）定的。

webpack 把 require(ModulePath)中的 ModulePath 叫做 request
自身会处理如下流程:

• 根据options.module定义的规则和module自身的性质，匹配其loader
• 调用resovler，基于context和request、loader的路径，获取loader和request的绝对路径
• 加载loader, 读取request的内容，称为source，并以waterfall的形式让loader处理
• 如果需要，将loader处理完的source，交给parser（后面有说）处理
• 将dependencies转化为module
• module的id为0，则为entry

parser

解析JS文件，并遍历。自身会这么做:

• 调用 acorn 生成 ast
• 遍历 ast，其中每个语句都会触发插件，例如 parse.applyPluginBailResult('call commonjs:require:xxx', xxx, xx)。就连 require 函数添加依赖的功能也是插件完成的。

resolver

顾名思义，将路径转化为绝对路径。有 normalResolver、contextResolver、loaderResolver 三种。contextResolver 用于解析 contextModule（形如 require('a/' + b + '/c') 这种）

chunk （不支持插件，但 compilation 上某些插件会在某些方法中被触发）

可以认为 chunk 是 entry 和 entry 依赖的合集，或者是按需加载的 module 及其依赖。（如果不考虑优化）

chunkHash 是根据 chunk的id，name 以及包含的 module 内容生成。

xxTemplate

将chunk生成assets的模板。

做法：

• 根据 chunk 类型选择生成的 assets 的头部（比如说写入 commonjs 的 runtime）
• 将 module 当做依赖，结合其 id，用函数包裹，添加到到 {} 中

source

包含源码以及其 sourceMap。如果 xxModule 并没有执行 parse 阶段的话，只会在 emit 的时候才会去调用 source.source 方法获取源码。也就是说，source 可以是根据 compilation、module 的元数据生成的，非常强大的特性。