面试题：Webpack CLI 脚手架自定义插件开发与应用场景

插件开发流程

插件基本结构：
- 一个 Webpack 插件本质上是一个具有 apply 方法的 JavaScript 对象。
- 示例代码如下：

class TimestampReplacementPlugin {
    constructor(options) {
        // 初始化插件配置
        this.options = options;
    }
    apply(compiler) {
        // 在这里挂载钩子函数
    }
}
module.exports = TimestampReplacementPlugin;

获取 Webpack 编译上下文：
- 在插件的 apply 方法中，compiler 参数就是 Webpack 的编译上下文。compiler 包含了 Webpack 整个生命周期的钩子函数以及一些 Webpack 配置等信息。
在合适的生命周期钩子中实现替换逻辑：
- 通常选择 compilation 钩子，它在 Webpack 创建 Compilation 对象时触发，Compilation 对象代表了一次资源的构建。
- 在 compilation 钩子中，可以通过 compilation.assets 获取所有要输出的资源。
- 示例代码如下：

class TimestampReplacementPlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler) {
        compiler.hooks.compilation.tap('TimestampReplacementPlugin', (compilation) => {
            compilation.hooks.processAssets.tap({
                name: 'TimestampReplacementPlugin',
                stage: compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
            }, (assets) => {
                const timestamp = new Date().getTime();
                for (const name in assets) {
                    if (Object.prototype.hasOwnProperty.call(assets, name)) {
                        let source = assets[name].source();
                        if (typeof source ==='string') {
                            source = source.replace(this.options.commentPattern, timestamp);
                            assets[name] = {
                                source: () => source,
                                size: () => source.length
                            };
                        }
                    }
                }
            });
        });
    }
}
module.exports = TimestampReplacementPlugin;

上述代码中，假设 options.commentPattern 是用于匹配特定注释的正则表达式。在 processAssets 钩子中，对每个资源进行遍历，若资源内容是字符串且匹配特定注释，则将其替换为当前时间戳。

其他实际应用场景

代码压缩与混淆：
- 自定义插件可以在打包过程中对代码进行压缩和混淆。例如，使用 Terser 等工具集成到自定义插件中，在 Webpack 构建的合适阶段对代码进行处理，减小输出文件体积，提高代码的安全性，防止代码被轻易反编译。
注入环境变量：
- 在开发过程中，可能需要根据不同的环境（开发、测试、生产）注入不同的环境变量。自定义插件可以在打包时读取配置文件或者环境变量，然后将相应的环境变量注入到代码中。例如，在生产环境注入 API 地址，在开发环境注入本地开发的 API 地址，方便开发和部署。

面试题：Webpack CLI 脚手架自定义插件开发与应用场景

知识考点

面试题答案

插件开发流程

其他实际应用场景