🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

引言

Webpack 作为前端开发中常用的打包工具，其强大之处不仅在于能够将多个模块打包成一个或多个文件，还在于它具有丰富的生命周期钩子。这些钩子允许开发者在 Webpack 打包过程的不同阶段插入自定义逻辑，从而实现诸如代码压缩、资源拷贝、生成 HTML 文件等功能。了解 Webpack 的生命周期，有助于开发者更好地利用 Webpack 的插件机制，优化项目的构建流程。

Webpack 生命周期概述

Webpack 的生命周期可以看作是一系列钩子事件的集合，这些钩子事件在打包过程的不同阶段被触发。Webpack 插件通过监听这些钩子事件，并在事件触发时执行自定义的回调函数，从而实现对打包过程的干预。Webpack 的生命周期主要分为编译前、编译过程和编译后三个大的阶段。

详细生命周期阶段及钩子介绍

编译前阶段

1. entryOption

• 触发时机：在 Webpack 配置中的 entry 选项被处理之后触发。
• 用途：可以在这个钩子中修改或扩展 entry 选项，例如动态添加入口文件。
• 示例代码：

class MyPlugin {
    apply(compiler) {
        compiler.hooks.entryOption.tap('MyPlugin', (context, entry) => {
            // 动态添加入口文件
            entry.newEntry = './src/newEntry.js';
            return true;
        });
    }
}

2. afterPlugins

• 触发时机：在所有配置的插件被安装之后触发。
• 用途：可以在这里对插件进行一些额外的配置或初始化操作。
• 示例代码：

class MyPlugin {
    apply(compiler) {
        compiler.hooks.afterPlugins.tap('MyPlugin', () => {
            console.log('所有插件已安装');
        });
    }
}

3. afterResolvers

• 触发时机：在解析器（resolver）设置完成之后触发。
• 用途：可以对解析器进行一些自定义配置，例如添加自定义的解析规则。
• 示例代码：

class MyPlugin {
    apply(compiler) {
        compiler.hooks.afterResolvers.tap('MyPlugin', () => {
            const resolver = compiler.resolverFactory.get('normal');
            // 添加自定义解析规则
            resolver.hooks.resolve.tap('MyResolver', (request) => {
                // 自定义解析逻辑
                return request;
            });
        });
    }
}

编译过程阶段

1. compile

• 触发时机：在编译开始之前触发。
• 用途：可以在这个钩子中做一些编译前的准备工作，例如创建临时文件或初始化一些变量。
• 示例代码：

class MyPlugin {
    apply(compiler) {
        compiler.hooks.compile.tap('MyPlugin', (params) => {
            console.log('编译即将开始');
        });
    }
}

2. compilation

• 触发时机：在创建新的编译对象（compilation）时触发。
• 用途：可以对 compilation 对象进行操作，例如监听 compilation 对象上的钩子，处理模块和资源。
• 示例代码：

class MyPlugin {
    apply(compiler) {
        compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
            console.log('新的编译对象已创建');
            compilation.hooks.optimize.tap('MyPlugin', () => {
                console.log('开始优化模块');
            });
        });
    }
}

3. make

• 触发时机：在开始构建模块之前触发。
• 用途：可以在这个钩子中手动添加模块到编译过程中。
• 示例代码：

class MyPlugin {
    apply(compiler) {
        compiler.hooks.make.tapAsync('MyPlugin', (compilation, callback) => {
            // 手动添加模块
            compilation.addEntry(compiler.context, './src/newModule.js', 'newModule', (err) => {
                callback(err);
            });
        });
    }
}

4. afterCompile

• 触发时机：在编译完成之后触发。
• 用途：可以在这个钩子中对编译结果进行一些后处理操作，例如清理临时文件。
• 示例代码：

class MyPlugin {
    apply(compiler) {
        compiler.hooks.afterCompile.tap('MyPlugin', (compilation) => {
            console.log('编译已完成');
        });
    }
}

编译后阶段

1. emit

• 触发时机：在生成资源到输出目录之前触发。
• 用途：可以在这个钩子中对生成的资源进行修改或添加新的资源。
• 示例代码：

class MyPlugin {
    apply(compiler) {
        compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
            const assets = compilation.assets;
            for (const assetName in assets) {
                // 对资源进行处理
                const source = assets[assetName].source();
                const newSource = source.replace('oldText', 'newText');
                assets[assetName] = {
                    source: () => newSource,
                    size: () => newSource.length
                };
            }
            callback();
        });
    }
}

2. afterEmit

• 触发时机：在资源生成并输出到目录之后触发。
• 用途：可以在这个钩子中进行一些清理工作或执行一些与文件系统相关的操作。
• 示例代码：

class MyPlugin {
    apply(compiler) {
        compiler.hooks.afterEmit.tap('MyPlugin', (compilation) => {
            console.log('资源已输出到目录');
        });
    }
}

3. done

• 触发时机：在整个编译过程完成之后触发。
• 用途：可以在这个钩子中输出一些编译完成的信息，例如打包时间、打包结果等。
• 示例代码：

class MyPlugin {
    apply(compiler) {
        compiler.hooks.done.tap('MyPlugin', (stats) => {
            console.log('编译完成，打包时间：', stats.endTime - stats.startTime, 'ms');
        });
    }
}

4. failed

• 触发时机：在编译过程中出现错误时触发。
• 用途：可以在这个钩子中处理编译错误，例如记录错误日志或发送错误通知。
• 示例代码：

class MyPlugin {
    apply(compiler) {
        compiler.hooks.failed.tap('MyPlugin', (error) => {
            console.error('编译失败：', error);
        });
    }
}

总结

Webpack 的生命周期提供了丰富的钩子事件，允许开发者在打包过程的不同阶段插入自定义逻辑。通过合理利用这些钩子，开发者可以实现各种复杂的功能，如代码压缩、资源优化、自动化部署等。了解 Webpack 的生命周期，有助于开发者更好地掌握 Webpack 的插件机制，提高项目的构建效率和可维护性。在实际开发中，开发者可以根据项目的具体需求，选择合适的钩子来实现自定义的构建逻辑。