webpack插件机制

Posted 2021-01-25 maomao^_^

webpack插件机制是整个webpack工具的核心，那么webpack插件有什么特点呢？

1、独立的JS模块，暴露相应的函数

2、函数原型上的apply方法会注入compiler对象(之所以要定义apply方法，是因为源码中是通过plugin.apply()调用插件的)

3、compiler对象上挂载了相应的webpack事件钩子

4、事件钩子的回调函数里能拿到编译后的compilation对象，如果是异步钩子还能拿到相应的callback

下面看个例子：

function MyPlugin(options) {} //根据options配置插件

MyPlugin.prototype.someFunc = function(){} 
// 2.函数原型上的 apply 方法会注入 compiler 对象,pply方法是必须要有的，因为当我们使用一个插件时（new somePlugins({})），webpack会去寻找插件的apply方法并执行

MyPlugin.prototype.apply = function(compiler) { // 3.compiler 对象上挂载了相应的 webpack 事件钩子 4.事件钩子的回调函数里能拿到编译后的 compilation 对象 

   // compiler.plugin(\'***\')和compilation.plugin(\'***\')代表什么？
   // document.addEventListener熟悉吧？其实是类似的
   // compiler.plugin(\'***\')就相当于给compiler设置了事件监听
   // 所以compiler.plugin(\'compile\')就代表：当编译器监听到compile事件时，我们应该做些什么

　　// compile（\'编译器\'对\'开始编译\'这个事件的监听）
  compiler.plugin("compile", function(params) {
    console.log("The compiler is starting to compile...");
  });

　　// compilation（\'编译器\'对\'编译ing\'这个事件的监听）
   compiler.plugin("compilation", function(compilation) {
     console.log("The compiler is starting a new compilation...");
     // 在compilation事件监听中，我们可以访问compilation引用，它是一个代表编译过程的对象引用
     // 我们一定要区分compiler和compilation，一个代表编译器实体，另一个代表编译过程
     // optimize(\'编译过程\'对\'优化文件\'这个事件的监听)
     compilation.plugin("optimize", function() {
       console.log("The compilation is starting to optimize files...");
     });
   });

　　// emit（\'编译器\'对\'生成最终资源\'这个事件的监听）

　 compiler.plugin(\'emit\', (compilation, callback) => { ... })

} 
// 1.独立的 JS 模块，暴露相应的函数 
module.exports = MyPlugin

var MyPlugun = require(\'my-plugin\')
var webpackConfig = {

  plugins:[
　　new MyPlugin({options:true})
]}

compiler对象

compiler 即 webpack 的编辑器对象，代表了完整的配置的webpack环境。一旦开启webpack之后，这个对象就被构建了，并且这个对象会使用所有操作设置，包括options, loaders, 以及plugins来进行配置。compiler 对象中包含了所有 webpack 可配置的内容，开发插件时，我们可以从 compiler 对象中拿到所有和 webpack 主环境相关的内容。

compilation 对象

 compilation 对象代表了一次单一的版本构建和生成资源。当运行webpack开发中间件的时候，每次检测到文件变化的时候都会产生一个新的compilation，因此会生成一系列编译后的资源。Compilation表示有关模块资源，已编译资源，已更改文件和监视依赖关系的当前状态的信息。该compilation还提供了许多回调点，插件可以选择执行自定义操作。一个编译对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。

tapable 库

这个库暴露了所有和事件相关的 pub/sub 的方法。而且函数 Compiler 以及函数 Compilation 都继承自 Tapable。

事件钩子其实就是类似 MVVM 框架的生命周期函数，在特定阶段能做特殊的逻辑处理。

 

参考：https://www.cnblogs.com/MuYunyun/p/8875908.html

推荐：http://www.360doc.com/content/18/0305/08/35331283_734368495.shtml