面试题：Webpack 中如何自定义一个简单的插件

Question

请描述自定义 Webpack 插件的基本步骤，并给出一个简单示例，例如实现一个在打包结束后输出 '打包完成' 日志的插件。

Answer 1

自定义 Webpack 插件基本步骤

1. 创建插件类：插件本质是一个具有 apply 方法的 JavaScript 类。
2. 在 apply 方法中绑定 Webpack 钩子：Webpack 提供了各种生命周期钩子，通过 compiler.hooks 访问并绑定相应钩子。
3. 在钩子回调函数中编写插件逻辑：根据钩子的执行时机，编写插件要执行的具体操作。

示例代码

class LogAfterBuildPlugin {
    apply(compiler) {
        compiler.hooks.done.tap('LogAfterBuildPlugin', () => {
            console.log('打包完成');
        });
    }
}

module.exports = LogAfterBuildPlugin;

在 Webpack 配置文件中使用该插件：

const LogAfterBuildPlugin = require('./LogAfterBuildPlugin');

module.exports = {
    // 其他 Webpack 配置项
    plugins: [
        new LogAfterBuildPlugin()
    ]
};