# 实现Plugin * 创建：webpack在其内部组件创建大量钩子 * 注册；插件将自己的方法注册到对应的钩子，交给wbepack * 调用：webpack编译过程，适时地触发相应的钩子 ## 流程 * 初始：启动创建 读取与合并参数，加载plugin，实例化compiler * 编译：从entry出发，针对每一个module调用loader 翻译文件内容并找到module依赖 进行编译处理 * 输出：将编译后的module组合成chunk 将chunk转化为文件 输出到文件系统 ~~~ // @file: plugins/myplugin.js const pluginName = 'MyPlugin' // tapable是webpack自带的package，是webpack的核心实现 // 不需要单独install，可以在安装过webpack的项目里直接require // 拿到一个同步hook类 const { SyncHook } = require("tapable"); class MyPlugin { // 传入webpack config中的plugin配置参数 constructor(options) { // { test: 1 } console.log('@plugin constructor', options); } apply(compiler) { console.log('@plugin apply'); // 实例化自定义事件 compiler.hooks.myPlugin = new SyncHook(['data']) compiler.hooks.environment.tap(pluginName, () => { //广播自定义事件 compiler.hooks.myPlugin.call("It's my plugin.") console.log('@environment'); }); // compiler.hooks.compilation.tap(pluginName, (compilation) => { // 你也可以在compilation上挂载hook // compilation.hooks.myPlugin = new SyncHook(['data']) // compilation.hooks.myPlugin.call("It's my plugin.") // }); } } module.exports = MyPlugin ~~~