前言

相比于loader，插件的能力范围更广，因为Loader只是在模块的加载环节工作，而插件的作用范围几乎可以触及webpack工作的每一个环节。
webpack的插件机制就是我们软件开发中最常见的钩子机制。
在webpack整个工作工程中会有很多环节，为了便于插件的扩展，Webpack几乎在每一个环节都埋下了一个钩子。这样我们在开发插件的时候，通过往这些钩子上挂载不同的任务，就可以轻松扩展Webpack的能力。
如下图所示：

下面我们通过开发一个插件来了解如何往这些钩子上挂载任务从而熟悉webpack的插件机制的实现。

需求

开发一个插件能够去除打包后代码的注释

插件开发

目录结构如下：

Webpack要求我们的插件必须是一个函数或者是一个包含apply方法的对象，这里我们定义一个类型，这个类型中定义一个apply方法。

上面将插件的大体结构写好了，下面我们就需要考虑将任务挂载到哪个钩子上？
通过查阅API文档，我们知道有一个emit的钩子，这个钩子会在Webpack即将向输出目录输出文件时执行，这符合我们的需求。

经过查阅资料我们知道，compilation.assets[name].source()可以输出文件的内容，能拿到文件名和文件内容接下来的任务就是判断文件名是不是.js结尾以及去除注释的逻辑

构建结果如下：

总结

webpack插件机制就是在它特定的钩子里挂载特定的任务，也就是我们熟悉的AOP(面向切面编程)