webpack 源码 – seal hook 之代码生成

compilation.seal 实例方法

功能

• 执行 this.hooks.seal

• 进行大量 hooks ，部分 hook 是空的可以用插件来阻拦

• 执行 this.hooks.optimizeTree
• 在 this.hooks.optimizeTree 中生成代码 this.createChunkAssets()，和压缩代码this.hooks.optimizeChunkAsset
• 最后执行 this.hook.afterSeal

核心功能

• 生成代码 this.createChunkAssets()
• 压缩代码 this.hooks.optimizeChunkAsset

生成代码 createChunkAssets()

createChunkAssets 是 compilation 实例方法

createChunkAssets 主要流程

• 读取 webpack 的输出配置 outputOptions
• 使用 mainTemplate 实例生成 manifest , const manifest = template.getRenderManifest({ 配置 })
• 根据 manifest 生成文件名 file = this.getPath(filenameTemplate, fileManifest.pathOptions);
• 根据 manifest 生成代码 source = fileManifest.render();
• 生成对应的 assets 资源 this.assets[file] = source;
• 调用 hook 生成 chunk 资源 this.hooks.chunkAsset.call(chunk, file);

getRenderManifest, mainTemplate 实例生成 manifest

• getRenderManifest 中创立 result 数组再调用 renderManifest hook

• renderManifest hook 最重要的就是给 result(manifest) 增加 mainTemplate 实例的 render 函数

什么是 manifest

manifest 保存着 chunk 对应相关 module 的映射信息, 可以看到这个 manifest 中的 chunk0 包含了所有生成它的 module 信息，还增加了通过 modules 生成 chunk 代码的 render 函数

生成代码 source , fileManifest.render

source = fileManifest.render(); 执行到 MainTemplate 的 render 实例方法中，这个方法通过 render hook 生成一个 source, source.children 数组中可以看出是与 webpack 最终生成代码类似的内容了，不过其中文件 module 用了 // CONCATENATED MODULE 注释标识，源码也在 ReplaceSource 实例对象中

manifest.render 流程

• MainTemplate.js – constructor 实现 this.hooks.render

• this.hooks.render – 对 source 进行 add 增加固定格式的代码，最后通过 modules hook 增加对应的 module 代码ReplaceSource 实例和 CONCATENATED MODULE 标记

  

• this.hooks.modules – 对 module 进行解析，生成包裹源码的 ReplaceSource 实例
  在 JavascriptModulesPlugin 中实现，调用静态方法 Template.renderChunkModules

  

Template.renderChunkModules 生成 ReplaceSource 实例标记 CONCATENATED MODULE

• Template.renderChunkModules 中的 allModule
  allModule 数组内容就是每个 module 对应的 CONCATENATED MODULE 的标记和包裹 module 源码的 ReplaceSource

• allModule 核心是通过 moduleTemplate.render 创立 source

moduleTemplate.render

通过 module.source 创立 moduleSource， 这里就是我们需要的 module 代码内容, 最后打包返回到 compoilation.js 赋值给对应的 assets[file]

module.source 收集 module 信息, 返回 module 对应代码

收集 module 信息 modulesWithInfo

遍历 modulesWithInfo 组装 module 代码 ReplaceSource 实例标记 CONCATENATED MODULE

赋值 assets

source 由 fileManifest.render 最终生成赋值到 compoilation 实例的 assets[file] 上，最后调用 chunkAsset hook 对 source 源码进行压缩

总结 webpack 的代码生成

• compilateion.seal：
  1执行 hooks seal，运行大量 hooks 用于编写阻拦插件
  2执行 this.hooks.optimizeTree，生成代码 this.createChunkAssets()，和压缩代码this.hooks.optimizeChunkAsset
  3结束 seal 执行 hooks.afterSeal

• 生成代码 createChunkAssets
  1读取 webpack 的输出配置 outputOptions
  2生成 chunk 映射 module 的 manifest, 并增加通过 module 生成 chunk 代码的 render 函数
  3manifest 的 render 函数， MainTemplate 的 render 实例方法生成 source 源码
  4createChunkAssets 生成 source 源码结束返回 compilation 上赋值给 assets[file]