webpack源码速记

[raozhanping]

Complication

compilation 具有很多的属性和钩子函数，下面我们将他们列出来

getStats

返回当前 compilation 的 Stats 对象

() => Stats

addModule

将 module 添加到当前 compilation

(module, cacheGroup) => void

getModule

根据标记从当前 compilation 获取 module

(identifier) => module

findModule

尝试通过标识符搜索 module

(identifier) => module

waitForBuildingFinished

当传入的module构建完成时执行回调 callback

(module, callback) => void

buildModule

构建传入的 module

/**
* @param module - 需要构建的模块
* @param optional - 可选标记
* @param origin - 请求构建此模块的原始模块
* @param dependencies - 要构建的模块的可选依赖
*/
(module, optional, origin, dependencies) => void

processModuleDependencies

处理给定模块的依赖

/**
* @param module - 要处理依赖的模块
* @param callback- 处理模块的依赖时要调用的回调
*/
(module, callback) => void

addModuleDependencies

向模块添加依赖项。处理依赖关系后，由 processModuleDependencies 自动调用

/**
* @param module - 要添加依赖项的模块
* @param dependencies - 将依赖项排序后添加到模块中
* @param bail - 发生错误时是否保释
* @param cacheGroup - 模块的 `cacheGroup` 
* @param recursive - 是否递归遍历
* @param callback - 添加模块依赖项后调用的函数
*/
(module, dependencies, bail, cacheGroup, recursive, callback) => void

addEntry

添加 entry 到 compilation

/**
* @param context - `entry`的上下文路径
* @param entry - 入口文件
* @param name - 入口名称
* @param callback - 添加完入口文件后执行的回调 
*/
(context, entry, name, callback) => void

prefetch

用给定的依赖项创建一个模块

/**
* @param context - 上下文路径
* @param dependency - 用来创建模块的依赖项
* @param callback - 模块回调
*/
(context, dependency, callback) => void

rebuildModule

触发模块重新构建

/**
* @param module - 要重新构建的模块
* @param thisCallback - 模块重新构架完成后执行的回调函数
*/
(module, thisCallback) => void

finish

完成 compilation 并且执行回调

callback => void

seal

密封编译并且执行回调

callback => voild

unseal

解开编译并且执行回调

callback => void

reportDependencyErrorsAndWarnings

将给定模块的错误和警告信息添加到编译错误和警告中

/**
* @param module - 要发送错误和警告的模块
* @param blocks- 依赖项报告信息
*/
(module, blocks) => void

addChunkInGroup

将模块添加到现有的chunkGroup或创建一个新的

/**
* @param groupOptions - chunkGroup 选项
* @param module- 引用chunkGroup的模块
* @param loc - 引用chunkGroup的位置（模块内部）
* @param request - 引用chunkGroup的请求路径
*/
(groupOptions, module, loc, request) => chunkGroup

addChunk

创建并添加一个新chunk到 compilation.chunks

name => chunk

assignDepth

给给定模块及其依赖分配 depth

module => void

getDependencyReference

返回给定模块的依赖项的引用

(module, dependency) => dependency

processDependenciesBlocksForChunkGroups

从 module 图创建 chunk 图。这个过程分为两个阶段：

• 遍历模块图并在 chunkDependencies 中构建基本的块图
• 遍历基本块图的所有可能方式并跟踪可用模块。遍历过程中， processDependenciesBlocksForChunkGroups将 chunk 彼此连接，将 Blocks 与 Chunks 连接。当一个 chunk 的所有模块都已经可用并且不需要连接块时，它将停止遍历

  
  /**

• @param module - 要处理的块组 */ inputChunkGroups => void

removeReasonsOfDependencyBlock

删除模块与依赖块之间的关系

/**
* @param module - 要删除的模块关系
* @param block - 依赖块
*/
(module, block) => void

patchChunksAfterReasonRemoval

删除依赖项 reasons 后修补模块与块之间的关系

/**
* @param module - 要修补关系的模块
* @param chunk - 要修补关系的块
*/
(module, chunk) => void

removeChunkFromDependencies

在删除依赖的 reason后 从给定的依赖块模块中删除给定的 chunk，由 removeReasonOfDependencyBlock自动调用

/**
* @param block - `chunk` 的依赖关系块模块
* @param chunk- 要从依赖项中删除的块
*/
(block, chunk) => void

addChunkInGroup

/**
* @param module - 要发送错误和警告的模块
* @param blocks- 依赖项报告信息
*/
(module, blocks) => void

getPath

/**
* @param module - 用于获取带有哈希的资产路径
* @param blocks- 数据对象
*/
(filename, data) => void

createChildCompiler

允许在 webpack 中运行webpack的另一个实例。但是是应用了不同的设置和配置的子实例。它从父级（或顶级编译器）赋值所有的钩子和插件，并创建一个子级 Compiler 实例

/**
* @param name - 子编译器实例的名称
* @param outputOptions - 输出选项对象
* @param plugins - 应用的插件
*/
(name, outputOptions, plugins) => compiler

emitAsset

version > webpack 4.40.0

/**
* @param file - 资产的名称
* @param source - 资产的内容
* @param assetInfo - 附加的资产信息
*/
(file, source, assetInfo = {}) => void

updateAsset

version > webpack 4.40.0

/**
* @param file - 资产的名称
* @param newSourceOrFunction - 资产新的内容或者是将就内容转化成新的处理函数
* @param assetInfoUpdateOrFunction - 新的资产信息或者是将就信息转化成新信息的处理函数
*/
(file, newSourceOrFunction, assetInfoUpdateOrFunction) => void

getAssets

返回当前编译下所有资产的数组

version > webpack 4.40.0

() => assets

getAsset

返回当前编译下给定名称的资产

version > webpack 4.40.0

name => asset

sortItemsWithModuleIds

() => void

sortItemsWithChunkIds

() => void

summarizeDependencies

() => void

createHash

() => void

modifyHash

() => void

createModuleAssets

() => void

checkConstraints

() => void

createChunkAssets

() => void

[raozhanping]

interface Compilation {
  additionalChunkAssets: [];
  assets: {
    filename: {
      children: [ RawSource, sourceMap ],
      emited: boolean,
      existsAt: string
    }
  },
  assetsInfo: Map {
    [filename]: {}
  },
  bail: any,
  cache: {},
  children: [ Compilation ],
  childrenCounters: {},
  chunkGroups: [ Entrypoint ],
  chunkTemplate: ChunkTemplate {
    hooks: {},
    outputOptions: {},
    _pluginCompat: SyncBailHook {}
  },
  chunks: [ Chunk ],
  compilationDependencies: Set {},
  compiler: Compiler {},
  contextDependencies: Set {},
  contextTimestamps: Map {},
  dependencyFactories: Map {},
  dependencyTemplates: Map {},
  emittedAssets: Set {},
  entries: [ MultiModule, NormalModule ],
  entripoints: Map {
    [name]: Entrypoint
  },
  errors: [],
  fileDependencies: Set {},
  fileTimestamps: Map {},
  fulllHash: string,
  hash: string,
  hooks: {},
  hotUpdateChunkTemplate: HotUpdateChunkTemplate {},
  inpurtFileSystem: CachedInputFileSystem {},
  logging: Map {},
  mainTemplate: MainTemaplte {},
  missingDependencies: Set {},
  moduleTemplates: {},
  modules: [ MultiModule | ContextModule | NormalModule],
  name: any,
  nameChunkGroups: Map {},
  namedChunks: Map {},
  options: {},
  outputOptions: {},
  performance: boolean,
  profile: any,
  records: {},
  requestShortener: RequestShortener {},
  resolverFactory: ResolverFactory {},  
  runtimeTemplate: RuntimeTemplate {},
  semaphore: Semaphore {},
  usedChunkIds: any,
  usedModuleIds: any,
  warnings: [],
  _buildingModules: Map {},
  _modules: Map {},
   _pluginCompat: SyncBailHook {},
  _prepareEntrypoints: [],
  _rebuildingModules: Map {},
  moduleTemplate: {}
}

[raozhanping]

🚀 hooks 调用顺序

正常字体 ➡️ compiler.hooks hook ➡️ compilation.hooks hook ➡️ normalModuleFactory.hooks

• beforeRun
• run
• beforeCompile
• compile
• thisCompilation
• compilation
• make 阶段由 entryPlugin 调用 addEntry
• addEntry 阶段调用 _addModuleChain 触发 moduleFactory
• beforeResolve
• factory
• resolver
• afterResolve
• createModule
• module
• buildModule 紧接着调用 normalModule.build
• finishModules
• seal
• optimizeDependenciesBasic
• beforeChunks