webpack4 编译过程

介绍webpack4的编译过程， 以及会触发的一些hooks。本文只是简单的展示webpack编译流水线，通过函数名调用，和hooks触发，可以了解大概流程。希望对编写webpack4插件的你带来帮助。 想了解具体实现的请移步看源码。

call 和 callAsync 的是事件触发
webpack4 的 hooks 继承自 webpack/tapable。 可以简单理解为一种订阅，分发的观察者模式。
webpack 内置插件会再各个编译流程中注册事件。 等待hook被call。
我们自己编写插件的话，可以在下面任意流程点注册事件，来改变编译的结果。

compiler.run() 为入口函数

Compiler 对象

• run()
  • this.hooks.beforeRun.callAsync
  • this.hooks.run.callAsync
  • compile()
    • this.hooks.beforeCompile.callAsync
    • this.hooks.compile.call;
    • new compilation()
    • this.hooks.make.callAsync
    • compilation.finish()
    • compilation.seal
    • this.hooks.afterCompile.callAsync
    • onCompiled
      • this.hooks.shouldEmit.call
      • this.hooks.done.callAsync

Compilation 对象 (太多了。。省略很多 - -！）

• this.hooks.finishModules.call
• this.hooks.seal.call 编译的封存已经开始
• this.hooks.optimize.call 优化编译
• this.hooks.optimizeTree.callAsync 树的异步优化
• this.hooks.afterOptimizeTree.call
• this.applyModuleIds()
• this.sortItemsWithModuleIds()
• this.applyChunkIds()
• this.sortItemsWithChunkIds()
• this.createHash()
• this.hooks.additionalAssets.callAsync
  • this.hooks.optimizeChunkAssets.callAsync
• this.hooks.afterSeal.callAsync