从白盒到黑盒-开发自定义webpack插件记录

之前很长一段时间,对webpack有一种畏惧的心理,觉得里面配置复杂,稍微写错某个地方就会导致本地服务跑不起来,样式加载错误,less没有被编译,ES6语法没有被编译。。都是一把辛酸泪。后来慢慢弄清entry,output,然后慢慢加一些loader,比如要开启CSS module功能,比如要对某个资源文件编译成JS,学会用在webpack里面加上plugin,让项目的webpack功能更加强大。但是这一切都是停留在简单使用上,现在我终于尝试去探究webpack内部机制,去利用webpack强大的可配置性做一些定制化的插件。

本文用词比较通俗,如果表述过于小白,敬请见谅。实在是因为webpack整套流程和机制过于精妙,我难窥一二。

怎么去了解和尝试写一个webpack插件

  1. 首先要写一个工厂函数,将这个函数的实例传入webpack的plugins属性
const Plugin = require('./plugin')
module.exports = {
    plugins: [
        new Plugin
    ]
}
  1. 这个工厂函数需要有apply方法,以下为es6写法的该构建函数
export default class DefPlugin {
    constructor(name) {}
    apply(compiler) {}
}
  1. 重点在于这个compiler对象了,它是webpack在构建时传入插件的实例对象

代表了webpack完整的构建流程。该对象在启动webpack时就被一次性创建,由webpack组合所有的配置项(包括原始配置,加载器和插件)构建生成。当在webpack环境中应用一个插件时,插件会收到compiler的引用,通过使用compiler,插件就可以访问到整个webpack的环境(包括原始配置,加载器和插件)。

然后它有很多事件钩子,类似生命周期,在构建的某个生命周期会触发对应的事件钩子,而我们写插件无非就是对使用webpack打包的文件进行自定义的处理,那我们要在合适的事件钩子上注册事件,在compiler对象上注册事件的方法为plugin,当然这是tapable0.2的写法,对1.x写法有兴趣的可以查询文档,方法如下:

apply(compiler) {
    compiler.plugin('compilation', (compilation) => {
       // ...
    })
}
  1. 好,已经知道compiler了,那么compilation又是个什么东西...

compilation--构建过程:compilation对象在compiler的compile方法里创建,它代表了一次单一的版本构建以及构建生成资源的汇总,compilation对象负责组织整个打包过程,包含了每个构建环节及输出环节所对应的方法。该对象内部存放着所有module、chunk、生成的assets以及用来生成最后打包文件的template的信息
当运行webpack-dev-server时,每当检测到一个文件变化,就会创建一次新的编译,从而生成一组新的编译资源。

webpack专门提供了一个compilation钩子,在这里可以获取到compilation对象,我们可以通过compilation对象上的属性做太多事情了,所有项目里的module在这里,chunk在这里...比如我要给改变我的某个module的值,我可以这样做

// 讲真这就是一个完整的自定义插件了,它可以把叫做test.js的module的内容的world字段全局替换为lynn
apply(compiler) {
    compiler.plugin('compilation', (compilation) => {
        compilation.moduleTemplate.plugin('module', (source, module, options, dependencyTemplates) => {
            if (/test.js/.test(module.request)) {
                let newSource = source.source().replace(/world/g, 'lynn')
                return newSource
            } else {
                return source
            }
            return module
        })
    })
}
  1. 好吧...又出现新名词ModuleTemplate,所有的module资源都是要经过模板包装一下输出,compilation上有四个子类,子类上有相应的方法,可以监听事件来出来输出的资源
    image.png

    比如我想改变某个module的代码,可以这样,每一个module都会触发一次moduleTemplate的module事件,那么直接在这里做一个判断,对想要改变的module进行source改造(这里不显示返回module和source是不行的)
    image.png

    我也可以在mainTemplate中改变整个bundle文件的源码
    image.png

compiler事件钩子

image.png

compilation事件钩子

image.png

关于tapable

webpack 的插件架构主要基于Tapable实现的,Tapable 是 webpack 项目组的一个内部库,主要是抽象了一套插件机制,而tapable的精妙之处在于可以玩转任何插件。

  1. webpack 源代码中的一些 Tapable 实例都继承或混合了 Tapable 类。Tapable 能够让我们为 javaScript 模块添加并应用插件。 它可以被其它模块继承或混合。
  2. 它类似于 NodeJS 的 EventEmitter 类,专注于自定义事件的触发和操作。 除此之外, Tapable 允许你通过回调函数的参数访问事件的生产者。
  3. webpack中很多对象实例都继承了tapable类,暴露了一个plugin方法,可以用来监听某个事件
  4. 自定义插件需要有一个apply方法,因为插件实例传入webpack后,webpack会调用实例的apply方法,传入compiler对象,拿到这个对象就可以访问webpack构建过程中的信息了,比如options,module应有尽有,其中在合适的事件里可以获取到compilation对象,它代表了本次编译过程,其中又有很多事件钩子供我们去挂载事件

敲黑板划重点

如果没有在文档中有可能找不到合适的事件钩子,那么这时可以去阅读源码找到钩子

关于webpack的构建流程 还要继续学习

附上淘宝神图一张webpack构建流程图和传送门一个链接

推荐阅读更多精彩内容