webpackege java_Webpack4.0各个击破（7）plugin篇

`plugin`机制是`webpack`中另一个核心概念，它基于事件流框架`tapable`，你可以参考浏览器环境中的*【DOM事件模型】*，*【SPA模型中的生命周期钩子】*或是node环境中的*【EventEmitter模块】*来理解其作用。`plugin`系统提供给开发者监听`webpack`生命周期并在特定事件触发时执行指定操作的能力。

目录

一. plugin概述

1.1 Plugin的作用

1.2 Compiler

1.3 Compilation

二. 如何写一个plugin

四. 实战

【参考】

一. plugin概述

1.1 Plugin的作用

plugin机制是webpack中另一个核心概念，它基于事件流框架tapable，你可以参考浏览器环境中的【DOM事件模型】，【SPA模型中的生命周期钩子】或是node环境中的【EventEmitter模块】来理解其作用。plugin系统提供给开发者监听webpack生命周期并在特定事件触发时执行指定操作的能力。

当然，要写一个真正能实现一定功能的插件，你还需要了解Compiler和Compilation这两个概念，网上可以找到非常多相关的文章(《webpack-docs/plugin》)。

1.2 Compiler

从表现上看，Compiler暴露了和webpack整个生命周期相关的钩子，通过如下的方式访问:

//基本写法compiler.hooks.someHook.tap(...)//如果希望在entry配置完毕后执行某个功能compiler.hooks.entryOption.tap(...)//如果希望在生成的资源输出到output指定目录之前执行某个功能compiler.hooks.emit.tap(...)

webpack在重要的生命周期节点上都提供了事件钩子，我们可以借此加入一些自定义的功能。我们来编写一个插件，直观地看看webpack中涉及的钩子：

//check-compiler-hooks-plugin.jsconst pluginName = 'checkCompilerHooksPlugin';module.exports = class checkCompilerHooksPlugin { apply(compiler){ //打印出entryOption执行完毕时Compiler暴露的钩子 for(var hook of Object.keys(compiler.hooks)){ console.log(hook); } }}

可以看到Compiler上可以使用的钩子(当然这种方式看到的钩子和实际触发顺序无关):

注意上图中Compiler.hooks暴露的事件钩子中有一个compilation，下一小节将解释它。

1.3 Compilation

Compilation暴露了与模块和依赖有关的粒度更小的事件钩子，官方文档中的说法是模块会经历加载(loaded),封存(sealed),优化(optimized),分块(chunked),哈希(hashed)和重新创建(restored)这几个典型步骤，从上面的示例可以看到，compilation是Compiler生命周期中的一个步骤，使用compilation相关钩子的通用写法为:

compiler.hook.........