面试题：Webpack自定义插件基础：插件的基本结构

Question

请阐述Webpack自定义插件的基本结构，包括需要实现的方法及该方法的参数含义。并且简单描述插件在Webpack构建流程中的执行时机。

Answer 1

Webpack自定义插件基本结构

1. 插件本质：一个JavaScript对象，包含apply方法。
2. 示例代码结构：

class MyPlugin {
    constructor(options) {
        // 插件初始化，接收配置选项
        this.options = options;
    }
    apply(compiler) {
        // 主要逻辑实现
    }
}
module.exports = MyPlugin;

需要实现的方法及参数含义

1. apply方法：这是插件的核心方法，Webpack在初始化插件时会调用此方法。
2. compiler参数：该参数是Webpack的编译器对象，包含了Webpack整个生命周期的钩子（hooks）。通过它可以访问和操作Webpack的编译流程。例如，可以使用compiler.hooks.emit.tap('MyPlugin', (compilation) => { /* 处理逻辑 */ })来注册在emit钩子触发时执行的逻辑。compilation是当前编译的上下文，包含了本次编译生成的所有资源、模块等信息。

插件在Webpack构建流程中的执行时机

1. 初始化阶段：Webpack启动并初始化配置，实例化所有插件，并调用每个插件的apply方法，将compiler对象传入。
2. 构建阶段：插件可以在不同的钩子阶段执行逻辑。例如entryOption钩子在Webpack处理入口文件之前触发；compile钩子在Webpack开始编译之前触发；compilation钩子在创建新的Compilation对象时触发，Compilation对象负责管理本次编译的模块和资源等；emit钩子在生成资源到输出目录之前触发，可用于修改输出资源；done钩子在整个编译完成时触发。插件可以根据需求在不同的钩子阶段挂载处理逻辑，从而干预Webpack的构建流程。