Webpack-源码三，从源码分析如何写一个plugin

最新推荐文章于 2024-07-03 03:30:00 发布

柒青衿

最新推荐文章于 2024-07-03 03:30:00 发布

阅读量9.4k

点赞数 3

分类专栏： webpack 源码文章标签：源码 webpack

本文链接：https://blog.csdn.net/qiqingjin/article/details/71335943

版权

本文将从源码角度解析如何编写一个Webpack插件，从黑盒和白盒两个视角探讨Plugin的工作机制。首先介绍了Compiler和Compilation两个核心类，然后详细阐述了编写Plugin的步骤，包括定义Plugin和在配置中引用。接着，通过分析Webpack源码，揭示了Plugin方法的调用过程和 Tapable 的作用。文章最后总结了Plugin的工作原理，鼓励读者进一步探索并实践。

摘要由CSDN通过智能技术生成

经过上一篇博客分析webpack从命令行到打包完成的整体流程，我们知道了webpage的plugin是基于事件机制工作的，这样最大的好处是易于扩展。社区里很多webpack的plugin，但是具体到我们的项目并不一定适用，这篇博客告诉你如何入手写一个plugin，然后分析源码相关部分告诉你你的plugin是如何工作。知其然且知其所以然。
该系列博客的所有测试代码。

从黑盒角度学习写一个plugin

所谓黑盒，就是先不管webpack的plugin如何运作，只去看官网介绍。

Compiler和Compilation两个类

官网介绍告诉我们，plugin涉及到源码中的Compiler类和Compilation类，并对这两个类进行了简要介绍。

Compiler在开始打包时就进行实例化，实例对象里面装着与打包相关的环境和参数，包括options、plugins和loaders等。
Compilation在每次文件变化重新打包时都进行一次实例化，它继承自Compiler，其实例对象里装着和modules及chunks相关的信息。

如果黑盒角度写plugin，知道这些就行了，没必要非去看源码。这两个对象上挂载的具体内容可以自己打印看看，不赘述。

写一个简单的plugin

写plugin大致分为两个步骤：

定义plugin
在webpack.config.js中引用这个plugin

定义plugin

function HTMLPlugin(options){
   
  // options是配置文件，你可以在这里进行一些与options相关的工作
}

// 每个plugin都必须定义一个apply方法，webpack会自动调用这个方法
HTMLPlugin.prototype.apply = function(compiler){
   
    // apply方法中会传入Compiler的实例compiler
    // 'emit'是该插件监听的事件，插件工作的逻辑在回调函数中
    compiler.plugin('emit', function(compilation, callback){
   
        // 回掉函数有两个参数
        // compilation和下一个回调函数，callback可以不传
        // 同步事件不传callback
        compilation.chunks.forEach(function(chunk){
   
            console