webpack原理解析（三）plugin机制

背景

在以前的文章中，咱们了解到了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机制，已经能够写本身的插件了。

关注咱们