深入Plugin

Loader是专注于不同类型模块的转换，某些功能是Loader无法实现的，就需要使用Plugin来实现。因为Webpack使用了Tapable，所以在构建的时候能够发出很多事件，而Plugin在收到自己感兴趣的事件后，就会执行相应的操作。

一个基础的插件结构如下：

• 一个JavaScript命名函数。
• 在插件函数的prototype上定义一个apply方法。
• 指定一个绑定到Webpack自身的事件钩子。
• 处理Webpack内部实例的特定数据。
• 功能完成后调用Webpack提供的回调。

class Myplugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler) {
        compiler.hooks.emit.tap('Myplug', (compilation) => {
        })
    }
}
module.exports = Myplugin;

插件中一个必不可少的函数就是apply，这个apply方法在安装插件时，会被Webpack Compiler调用一次。apply方法可以接收一个Webpack Compiler对象的引用，从而可以在函数中访问到Compiler对象。

Compiler和Compilation

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

Compiler对象代表了完整的Webpack环境配置。这个对象在启动Webpack时被一次性建立，并配置好所有可操作的设置，包括Options，Loader和Plugin。当在Webpack环境中应用一个插件时，插件将收到此Compiler对象的引用。可以使用它来访问Webpack的主环境。

Compilation对象代表了一次资源版本构建。当以监听模式运行Webpack时，每当检测到一个文件变化，就会创建一个新的Compilation，从而生成一组新的编译资源。一个Compilation对象包含了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。Compilation对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。

编写一个简单的Plugin

在编写插件之前，先看Webpack官网给出的一个插件编写的演示：

class FileListPlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler) {
        compiler.hooks.emit.tapAsync('FileListPlugin', (compilation, callback) => {
            // 在生成文件中，创建一个头部字符串：
            let filelist = 'In this build:\n\n';
            // 遍历所有编译过的资源文件，
            // 对于每个文件名称，都添加一行内容。
            Object.entries(compilation.assets).forEach(([filename, proObj]) => {
                filelist += ('- ' + filename + ' ' + proObj.size() + '\n');
            })
            // 将这个列表作为一个新的文件资源，插入到 webpack 构建中：
            compilation.assets[this.options.filename] = {
                source: function () {
                    return filelist;
                },
                size: function () {
                    return filelist.length;
                }
            };
            callback();
        })
    }
}
module.exports = FileListPlugin;

该插件是严格按照插件的定义来实现的，其功能是生成一个统计输出资源信息的文件。

下面我们来实现一个在打包完成后，自动提交代码到Gi仓库的插件：

const shell = require("shelljs");
class MyPlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler) {
        compiler.hooks.done.tap('MyPlugin', () => {
            shell.exec('git add .');
            shell.exec(`git commit 										  						 -m'${this.options.commitInfo}'`);
            shell.exec('git push');
        })
    }
}
module.exports = MyPlugin;

使用该插件之前，假设你的项目已经初始化好了Git的相关配置。该插件使用方式如下：

module.exports = {
    plugins: [
        new MyPlugin({
            commitInfo: '自定义插件使用'
        })
    ]
}

本章节提供案例源码下载：https://gitee.com/mvc_ydb/webpack/blob/master/deepPlugin.zip