之前很长一段时间，对webpack有一种畏惧的心理，觉得里面配置复杂，稍微写错某个地方就会导致本地服务跑不起来，样式加载错误，less没有被编译，ES6语法没有被编译。。都是一把辛酸泪。后来慢慢弄清entry，output，然后慢慢加一些loader，比如要开启CSS module功能，比如要对某个资源文件编译成JS，学会用在webpack里面加上plugin，让项目的webpack功能更加强大。但是这一切都是停留在简单使用上，现在我终于尝试去探究webpack内部机制，去利用webpack强大的可配置性做一些定制化的插件。
本文用词比较通俗，如果表述过于小白，敬请见谅。实在是因为webpack整套流程和机制过于精妙，我难窥一二。
怎么去了解和尝试写一个webpack插件
- 首先要写一个工厂函数，将这个函数的实例传入webpack的plugins属性
const Plugin = require('./plugin')
module.exports = {
plugins: [
new Plugin
]
}
- 这个工厂函数需要有apply方法，以下为es6写法的该构建函数
export default class DefPlugin {
constructor(name) {}
apply(compiler) {}
}
- 重点在于这个compiler对象了，它是webpack在构建时传入插件的实例对象
代表了webpack完整的构建流程。该对象在启动webpack时就被一次性创建，由webpack组合所有的配置项（包括原始配置，加载器和插件）构建生成。当在webpack环境中应用一个插件时，插件会收到compiler的引用，通过使用compiler，插件就可以访问到整个webpack的环境（包括原始配置，加载器和插件）。
然后它有很多事件钩子，类似生命周期，在构建的某个生命周期会触发对应的事件钩子，而我们写插件无非就是对使用webpack打包的文件进行自定义的处理，那我们要在合适的事件钩子上注册事件，在compiler对象上注册事件的方法为plugin，当然这是tapable0.2的写法，对1.x写法有兴趣的可以查询文档，方法如下：
apply(compiler) {
compiler.plugin('compilation', (compilation) => {
// ...
})
}
- 好，已经知道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
})
})
}
- 好吧...又出现新名词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的精妙之处在于可以玩转任何插件。
- webpack 源代码中的一些 Tapable 实例都继承或混合了 Tapable 类。Tapable 能够让我们为 javaScript 模块添加并应用插件。 它可以被其它模块继承或混合。
- 它类似于 NodeJS 的 EventEmitter 类，专注于自定义事件的触发和操作。 除此之外, Tapable 允许你通过回调函数的参数访问事件的生产者。
- webpack中很多对象实例都继承了tapable类，暴露了一个plugin方法，可以用来监听某个事件
- 自定义插件需要有一个apply方法，因为插件实例传入webpack后，webpack会调用实例的apply方法，传入compiler对象，拿到这个对象就可以访问webpack构建过程中的信息了，比如options，module应有尽有，其中在合适的事件里可以获取到compilation对象，它代表了本次编译过程，其中又有很多事件钩子供我们去挂载事件
敲黑板划重点
如果没有在文档中有可能找不到合适的事件钩子，那么这时可以去阅读源码找到钩子
关于webpack的构建流程 还要继续学习
附上淘宝神图一张webpack构建流程图和传送门一个链接
网友评论