面试题：JavaScript的Webpack自定义插件开发及应用场景

1. 在Webpack中开发自定义插件的步骤

创建插件类：

插件本质是一个具有 apply 方法的JavaScript对象或类。例如：

class MyPlugin {
    constructor(options) {
        // 插件初始化，可以接收配置选项
        this.options = options;
    }
    apply(compiler) {
        // 这是插件的核心方法，在这里注册各种钩子
    }
}
module.exports = MyPlugin;

注册钩子函数：

在 apply 方法中，通过 compiler 对象注册各种钩子。compiler 是Webpack的编译器实例，包含了整个编译生命周期的钩子。例如：

apply(compiler) {
    compiler.hooks.emit.tap('MyPlugin', (compilation) => {
        // 这里的 'MyPlugin' 是插件名称，在这个钩子中执行自定义逻辑
    });
}

2. 插件开发的生命周期钩子函数及作用

entryOption：

作用：在Webpack读取入口文件之前触发。可以用来修改入口配置。
示例：

compiler.hooks.entryOption.tap('MyPlugin', (context, entry) => {
    // context是Webpack的上下文路径，entry是入口配置
    if (this.options.someCondition) {
        entry['newEntry'] = './newEntry.js';
    }
});

compile：

作用：在Webpack开始编译一个新的 compilation 对象之前触发。可以用来配置 compilation 对象。
示例：

compiler.hooks.compile.tap('MyPlugin', (params) => {
    // params包含这次编译的参数，例如依赖解析规则等
    params.normalModuleFactory.options.parser.js.useSourceMap = false;
});

compilation：
- 作用：在 compilation 对象创建之后触发。compilation 对象包含了这次编译的模块、依赖等信息。可以在这个钩子中注册更多针对 compilation 的钩子。
- 示例：
```
compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
    compilation.hooks.buildModule.tap('MyPlugin', (module) => {
        // 当一个模块开始构建时触发
    });
});
```

buildModule：

作用：在一个模块开始构建时触发。可以对模块进行预处理等操作。
示例：

compilation.hooks.buildModule.tap('MyPlugin', (module) => {
    if (module.resource.endsWith('.js')) {
        // 对JavaScript模块进行一些自定义处理
    }
});

normalModuleLoader：

作用：在一个模块被loader处理之前触发。可以用来修改loader的上下文等。
示例：

compilation.hooks.normalModuleLoader.tap('MyPlugin', (loaderContext, module) => {
    loaderContext.additionalData = '// 自定义的模块前缀';
});

finishModules：

作用：当所有模块都被构建完成后触发。可以进行一些模块构建后的统计等操作。
示例：

compilation.hooks.finishModules.tap('MyPlugin', () => {
    let totalModules = compilation.modules.length;
    console.log(`总共构建了 ${totalModules} 个模块`);
});

seal：

作用：在 compilation 即将生成资源之前触发。可以用来对 compilation 中的资源进行最后的修改。
示例：

compilation.hooks.seal.tap('MyPlugin', () => {
    let assets = compilation.assets;
    for (let name in assets) {
        if (name.endsWith('.js')) {
            let source = assets[name].source();
            assets[name] = {
                source: () => `// 自定义头部\n${source}`,
                size: () => source.length
            };
        }
    }
});

emit：

作用：在生成资源到输出目录之前触发。可以用来修改输出的资源。
示例：

compiler.hooks.emit.tap('MyPlugin', (compilation) => {
    let mainJs = compilation.assets['main.js'];
    if (mainJs) {
        let source = mainJs.source();
        compilation.assets['main.js'] = {
            source: () => source.replace('oldString', 'newString'),
            size: () => source.length
        };
    }
});

done：

作用：当整个编译完成后触发。可以用来做一些编译完成后的清理、通知等操作。
示例：

compiler.hooks.done.tap('MyPlugin', (stats) => {
    if (stats.hasErrors()) {
        console.error('编译出错了！');
    } else {
        console.log('编译成功');
    }
});

3. 适合使用自定义Webpack插件的场景

资源注入：
- 场景：在所有输出的JavaScript文件头部注入一段版权声明。
- 实现：在 emit 钩子中，遍历所有输出的JavaScript文件资源，修改其内容，注入版权声明。
优化统计：
- 场景：统计项目中各个模块的大小、依赖关系等信息，以便进行优化。
- 实现：在 finishModules 钩子中获取模块信息，在 done 钩子中输出统计结果。
自定义文件处理：
- 场景：对于特定格式的文件（如 .myext），进行自定义的解析和转换，而不适合使用常规的loader。
- 实现：在 compilation 钩子中注册 buildModule 钩子，针对 .myext 文件进行自定义处理。
环境变量注入：
- 场景：根据不同的构建环境（开发、生产等），注入不同的环境变量到代码中。
- 实现：在 entryOption 或 compile 钩子中，根据配置或环境变量修改入口文件或模块的解析配置，实现环境变量注入。

面试题：JavaScript的Webpack自定义插件开发及应用场景

知识考点

面试题答案

1. 在Webpack中开发自定义插件的步骤

2. 插件开发的生命周期钩子函数及作用

3. 适合使用自定义Webpack插件的场景