前言

介绍plugin

很多知识都是相似相通的，如果你可以做到举一反三对你运用技术可以提升一个台阶。我们先说说vue里的plugin吧，如果你封装过vue的组件库，你一定知道，需要提供为vue提供一个install方法，而webpack的plugin，需要我们为webpack提供一个apply方法。然后在webpack的配置文件里的对应位置实例化我们的导出的类，那么webpack在运行的时候就会运行apply方法。也许文字的方式说明难以理解，下面我会通过代码的方式逐行为你演示。

手写plugin

为什么我热衷于写简易的代码，因为好理解，老师上课在上课的时候会先教你77+7*7/7吗？一定不会吧，会先教给你1+1，然后慢慢递进到复杂，你看很多其他人上千行上万行的代码而头痛的时候是因为你不了解事情的本质而头痛，怎么评判一个人是不是一个好的老师，那一定是看他讲的东西能不能让你听懂。 第一步:新建plugin/myPlugin.js，并输入红框内标注的代码。（导出一个类，提供apply方法，方法里打印了一句话）

第二步：打开配置文件，require导入我们刚才写好的插件，并在配置的plugins的数组里实例化我们的类。

第三步: 执行webpack，可以看到我们成功的在终端看到了打印。

那么你真的成功了吗，细心地小伙伴肯定发现了，你的apply里怎么接收了一个compiler参数啊，这是个什么东东？我知道你很急，但是先别急，遇事不决我们先来到文档（API下的Plugins Compiler hooks）:

When developing a plugin for webpack, you might want to know where each hook is called. To learn this, search for hooks.<hook name>.call across the webpack source

我们从这句话get到什么信息，当我们为webpack开发一个插件时，如果你想知道每个钩子函数在哪被调用，请巴拉巴拉。接着我们看给出的一个伪代码:

compiler.hooks.someHook.tap('MyPlugin', (params) => {
  /* ... */
});

这么多hooks，那我们先挑一个hook吧，done，当编译完成调用。

第四步：参照伪代码写出我们的代码:

运行webpack，成功打印:

总结：由此我们也知道了compiler里hooks的用法，compiler.hooks.[hook的名字].[方法的名字]，这里因为有同步异步钩子的区分，所以方法也有不同，等待你去文档研究。虽然我们平时开发的过程中99%的时间不需要我们自己去写loader或者plugin，你说那我们还学个锤子，岂不是白学？no no no，你学的是流程，这样设计的思路，学的是思想，只有思想逐步建立起来，你才能去模仿更优秀的代码创造属于自己的东西。

尾声

至此，webpack的plugin已经和大伙聊完了，如果以后面试官再问你loader与plugin的区别，你能否跟他清晰地表述呢，如果能帮到你的话希望可以给我一个免费的一键三连！