webpack原理解析(三)plugin机制

4,017 阅读4分钟

背景

在之前的文章中,我们了解到了webpack的打包机制和loader,loader 用于转换某些类型的模块,而plugin则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。插件目的在于解决 loader 无法实现的其他事。所以我们很有必要探究一下webpack的plugin机制。

plugin是什么

在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。plugin是一个扩展器,在webpack打包的过程中,基于事件驱动的机制,监听webpack打包过程中的某些节点,从而执行广泛的任务。

基本插件架构

一个插件由以下构成:

  • 一个具名 JavaScript 函数。
  • 在它的原型上定义 apply 方法。
  • 指定一个触及到 webpack 本身的 事件钩子。
  • 操作 webpack 内部的实例特定数据。
  • 在实现功能后调用 webpack 提供的 callback。

首先是写一个构造函数(此构造函数上的 prototype 对象具有 apply 方法),apply 方法可以接收一个 webpack compiler 对象的引用,从而可以在回调函数中访问到 compiler 对象。再就是构造方法,接收配置中传入的options(此构造方法根据需要可写可不写)。

class ReadmeWebpackPlugin {
    constructor(options) {
         console.log(options)
    }

    apply(compiler){
      
    }
}
module.exports = ReadmeWebpackPlugin;

插件的使用:在webpack.config.js中的plugins 数组中添加一个实例

const ReadmetWebpackPlugin = require('./plugins/readme-webpack-plugin')
plugins:[
    new ReadmetWebpackPlugin({
      name:'hfj'
    })
  ],

这里传入了一个参数,可以在命令行看到是可以打印出来的。

compiler 和 compilation

在插件开发中最重要的两个资源就是 compiler 和 compilation 对象。理解它们的角色是扩展 webpack 引擎重要的第一步。

compiler可以理解为一个webpack的实例,该实例存储了webpack配置、打包过程等一系列的内容。compiler提供了compiler.hooks,在为 webpack 开发插件时,你可能需要知道每个钩子函数是在哪里调用的,具体就可以查阅官方文档。这里可以看到有很多时刻,我们可以根据这些不同的时刻去让插件做不同的事情。

compilation 模块会被 compiler 用来创建新的编译(或新的构建)。该实例存放的是本次打包编译的内容。

事件钩子

当我们决定在在compiler的某个确定的hooks写一些事情的时候,会发现hooks里有异步钩子和同步钩子,随便举几个例子:

当为AsyncSeriesHook时,我们使用tapAsync来tap插件,需要注意,我们需要调用 callback,此 callback 将作为最后一个参数传入函数。

当为SyncHook时,使用tap,并且不再需要callback。 我会把同步和异步两种情况写到后边的实战代码中,可以对比看一下

实战

现在我需要自己写一个插件,在webpack打包结束后把一个readme.txt放到dist目录。 首先需要知道,这是怎样的时刻,是的,是在webpack打包结束后,生成资源到 output 目录之前。 通过查看文档中的complier hook。Very good!有emit这个hook!同时发现,这个emit是AsyncSeriesHook,异步的,所以记得上文提到过的,使用它的tapAsync方法,并且要回调函数。 思路已经很清晰了,代码写起来!

class ReadmeWebpackPlugin {
    apply(compiler){
        compiler.hooks.emit.tapAsync('ReadmeWebpackPlugin',( compilation,callback ) => {
            console.log(compilation.assets)
            compilation.assets['readme.txt'] = {
                source:function(){
                    return 'readme'
                },
                size:function(){
                    return 6
                }
            }
            callback()
        })
    }
}
module.exports = ReadmeWebpackPlugin;

上述代码中打印了compilation.assets,打包后的内容有哪些是放在compilation的assets属性中的,所以我们可以依照上述增加键值对的方式再增加一个文件。 用一下:

//webpack.config.js
...其他配置,
 plugins:[
    new ReadmetWebpackPlugin()
  ],

成功:

这样,一个我们自己的插件就完成了。 附该项目完整地址附该项目完整地址

总结

如果你阅读了webpack的源码,你会发现,webpack中有很大的篇幅是基于plugin的机制编写的,所以可以说plugin是webapck的核心。好在我们已经搞懂了webpack的plugin机制,已经可以写自己的插件了。

关注我们

公众号@前端论道