面试题：Webpack自定义插件基础原理

Question

请简述Webpack自定义插件的基本开发流程，以及插件中常用的钩子函数有哪些，它们分别在Webpack构建的什么阶段触发？

Answer 1

Webpack自定义插件基本开发流程

1. 创建插件类：通过ES6的class关键字定义一个JavaScript类。这个类将作为Webpack插件，类中会有一个apply方法，Webpack会调用这个方法来安装插件。

class MyPlugin {
    constructor(options) {
        // 可以在这里初始化插件配置
        this.options = options;
    }
    apply(compiler) {
        // 插件逻辑将写在这里
    }
}

2. 在apply方法中绑定钩子函数：compiler对象包含了Webpack构建生命周期的钩子。使用compiler.hooks访问这些钩子，并使用钩子的tap（同步）或tapAsync（异步）、tapPromise（异步Promise形式）方法来绑定插件的处理逻辑。

class MyPlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler) {
        compiler.hooks.compile.tap('MyPlugin', compilation => {
            // 处理逻辑
        });
    }
}

3. 导出插件类：在模块的最后，使用module.exports将插件类导出，以便在Webpack配置中使用。

module.exports = MyPlugin;

4. 在Webpack配置中使用插件：在Webpack配置文件（通常是webpack.config.js）中，通过plugins数组引入插件，并可以传递插件的配置选项。

const MyPlugin = require('./MyPlugin');
module.exports = {
    // 其他配置...
    plugins: [
        new MyPlugin({ /* 配置选项 */ })
    ]
};

插件中常用的钩子函数及触发阶段

1. entryOption：
   • 触发阶段：在Webpack开始解析入口起点之前触发。
   • 用途：可以用来修改入口配置，比如动态添加入口文件。
2. compile：
   • 触发阶段：在Webpack创建新的Compilation对象之前触发。Compilation对象代表了一次资源的构建。
   • 用途：可以在这个阶段为Compilation对象添加一些自定义的属性或行为。
3. compilation：
   • 触发阶段：在Webpack创建新的Compilation对象之后触发。
   • 用途：用于访问和操作Compilation对象，比如添加自定义的loader、解析规则等。
4. buildModule：
   • 触发阶段：在一个模块开始构建时触发。
   • 用途：可以在模块构建前对模块做一些预处理，例如修改模块的源码。
5. normalModuleLoader：
   • 触发阶段：在使用loader处理模块之前触发。
   • 用途：可以用来修改loader的配置或插入自定义的loader。
6. finishModules：
   • 触发阶段：所有模块都被构建完成时触发。
   • 用途：可以在所有模块构建完成后，对模块进行一些整体的处理，比如统计模块的数量等。
7. seal：
   • 触发阶段：在Compilation对象密封之前触发，此时所有模块和依赖关系都已确定。
   • 用途：可以在这个阶段对Compilation对象做最后的修改，比如添加一些额外的chunk。
8. emit：
   • 触发阶段：在生成资源到输出目录之前触发。
   • 用途：可以用来修改即将输出的资源，比如修改文件内容、删除某些文件等。
9. afterEmit：
   • 触发阶段：在生成资源到输出目录之后触发。
   • 用途：可以执行一些与输出结果相关的操作，比如生成文件清单。
10. done：
    • 触发阶段：在整个构建过程完成时触发。
    • 用途：可以用于执行构建完成后的清理工作或通知操作，比如发送构建完成的通知邮件。