webpack compilation 钩子

Webpack Compilation 钩子

在 Webpack 中，Compilation 钩子是一个非常重要的概念。Compilation 对象代表了一次完整的构建过程，包含了所有关于模块和依赖的信息。在 Webpack 的构建过程中，Compilation 钩子被用来监听和处理各种构建事件。

注册 Compilation 钩子

要监听 Compilation 钩子，首先需要获取到 Compiler 对象，然后调用其 hooks.compilation 方法注册钩子函数。下面是一个简单的示例代码：

----- ------- - -------------------

----- -------- - ---------
  -- ------- --
---

------------------------------------------ ------------- -- -
  -- -- ----------- --
---

在上面的示例中，我们通过 compiler.hooks.compilation.tap 方法注册了一个名为 MyPlugin 的插件，用来监听 Compilation 钩子。

Compilation 钩子事件

Compilation 钩子包含了多个事件，可以用来监听不同的构建阶段。下面列举了一些常用的 Compilation 钩子事件：

optimize：优化阶段
seal：封装阶段
optimize-modules：优化模块阶段
optimize-chunks：优化块阶段
optimize-chunk-assets：优化块资源阶段
after-optimize-chunk-assets：优化块资源后阶段

示例代码

下面是一个简单的示例代码，演示了如何监听 Compilation 钩子事件并处理：

----- ------- - -------------------

----- -------- - ---------
  -- ------- --
---

------------------------------------------ ------------- -- -
  ------------------------------------------ -- -- -
    --------------------
  ---

  -------------------------------------- -- -- -
    --------------------
  ---
---

在上面的示例中，我们注册了两个钩子事件，分别监听了 optimize 和 seal 阶段。当 Webpack 运行到对应的阶段时，会触发相应的钩子事件，执行我们定义的处理函数。

通过监听 Compilation 钩子，我们可以在构建过程中执行一些自定义逻辑，实现更加灵活和定制化的构建流程。