webpack插件开发

[FrankKai]

• compilation.hooks.processAssets
• compiler还有什么hooks
• compilation还有什么hooks
• webpack中的module，chunk，bundle有什么区别

compilation.hooks.processAssets

这个compilation的钩子可以处理静态产物。

compilation.hooks.processAssets.tap(
  {
    name: 'MyPlugin',
    stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE, // 阶段
  },
  (assets) => {
      // 产物对象，key为asset路径，value为asset数据
  }
);

PROCESS_ASSETS_STAGE_SUMMARIZE：总结现有资产表阶段。

对于webpack4来说，等价hook可以使用compilation.hooks.optimizeAssets

compilation.hooks.optimizeAssets.tapAsync(
  pluginName,
  (assets, callback) => {
    // ...
    callback();
  }
);

compiler还有什么hooks

• environment---准备compiler环境时调用，就在通过配置文件初始化插件后。
• afterEnvironment---compiler环境安装完成后。
• entryOption---webpack选项的entry配置处理完成后，触发这个钩子。callback返回context、entry
• afterPlugins---内部plugin安装完成后调用。callback返回compiler
• afterResolvers---resolver安装完成后。callback返回compiler
• initialize---compiler对象初始化时调用。
• before---在compiler运行前调用。
• run---在开始读取records时调用。
• watchRun---触发了编译后，在真正的编译开始前，执行插件。callback返回compiler
• normalModuleFactory---在一个normalModuleFactory创建后调用。
• contextModuleFactory---在一个 contextModuleFactory创建后调用。
• beforeCompile---在编译参数创建完成后执行插件。params的初始值为normal和context模块工厂
• compile---beforeCompile后调用，新的编译创建前。这个hook没有被复制到子compiler。
• thisCompilation---初始化编译时执行，在发射compilation事件之前。会返回compilation和compilationParams。
• compilation---编译创建完成后，运行插件时调用。返回compilation和compilationParams。
• make---在完成编译前执行。返回compilation。
• afterCompile---在结束编译和封存编译时调用。
• shouldEmit---发射assets前调用。返回true的话发射output。
• emit---发射assets到output目录前执行。返回compillation。
• afterEmit---发射assets到output目录后。返回compillation。
• assetEmitted---在所有asset发射完成后。一个是file，一个是info。
• done---编译完成。返回stats。
• additionalPass---额外的构建过程。
• failed---编译失败调用。
• invalid---编译无效时调用。返回fileName，changeTime
• wacthClose---compilation被中断。
• shutdown---compiler被中断。
• infrastructureLog---基础设施日志。返回name，type，args。
• log---stats日志。status.logging, stats.loggingDebug, stats.loggingTrace

compilation还有什么hooks

• buildModule---在一个模块打包开始前，可以用来修改模块。cb返回module
• rebuildModule---重新打包一个模块前。cb返回module
• failedModule---模块打包失败时。cb返回module，error
• succeedModule---当一个模块构建成功时。cb返回module
• finishModules---所有模块没有错误情况下，完成打包。cb返回module
• finishRebuildingModule---模块重新构建，无论成功或失败条件下
• seal---当编译不再接收新的module时
• unseal---当编译开始接收新的module时
• optimizeDependencies---依赖开始优化时触发
• afterOptimizeDependencies---依赖优化后触发
• optimize---优化开始阶段触发
• optimizeModules---模块优化开始阶段触发。
• afterOptimizeModules---模块优化完成时触发。
• optimizeChunks---chunk优化
• afterOptimizeChunks---chunk优化完成
• optimizeTree---优化依赖树
• afterOptimizeTree---优化依赖树后
• optimizeChunkModules---树优化后，chunk module优化前。
• afterOptimizeChunkModules---chunkmodule优化完成后。
• shouldRecord---存储record。
• reviveModules---从records中重新存储模块信息。
• beforeModuleIds---给每个模块赋值一个id前执行
• moduleIds---给每个模块赋值一个id时执行
• optimizeModuleIds---优化模块id
• afterOptimizeModuleIds---优化模块id后
• reviveChunks---从record重新存储chunk信息
• beforeChunkIds---给每个chunk设置id前
• chunkIds---给每个chunk设置id前
• optimizeChunkIds---chunk id优化阶段
• afterOptimizeChunkIds---chunk id优化结束
• recordModules---存储module到record
• recordChunks---存储chunk到record
• beforeModuleHash---模块添加hash前
• afterModuleHash---模块添加hash后
• beforeHash---编译hash前
• afterHash---编译hash后
• recordHash---存储record信息的hash到records
• record---存储编译信息到records
• beforeModuleAssets---在模块资源创建前
• additionalChunkAssets---为chunk创建额外的asset
• shouldGenerateChunkAssets---决定是否生成chunk asset时触发
• beforeChunkAssets---创建chunk asset前执行。
• additionalAssets---为编译创建额外的assets。（可用于下载资源）
• optimizeChunkAssets---优化每个chunk asset。
• afterOptimizeChunkAssets---chunk assets优化完成。
• optimizeAssets---优化存储在compilation.assets中的所有assets。
• afterOptimizeAssets---优化存储在compilation.assets中的所有assets 后。
• processAssets---asset处理。name：插件名称，stage：什么阶段处理，additionalAssets：额外assets回调

webpack中的module，chunk，bundle有什么区别

看这个图就很明白了：

对于一份同逻辑的代码，当我们手写下一个一个的文件，它们无论是 ESM 还是 commonJS 或是 AMD，他们都是 module ；
当我们写的 module 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成 chunk 文件，webpack 会对这个 chunk 文件进行一些操作；
webpack 处理好 chunk 文件后，最后会输出 bundle 文件，这个 bundle 文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。