前言

webpack通过Plugin机制让其更灵活，以适应各种应用场景。在webpack行的生命周期中会广播许多事件,Plugin可以监昕这些事件,在合适的时机通过webpack提供的API改变输出结果。

一个最基础的Plugin

一个最基础的Plugin代码是这样的

class MyPlugin {
    constructor(options) {

    }
    apply(complier) {
        complier.plugin('compilation', function (compilation) {

        })
    }
}

webpack.config.js中

const MyPlugin = require('./plugins/test')
module.exports = {
    plugins:[
        new MyPlugin(options)
    ]
}

Complier和Compliation

在开发Plugin时最常用的两个对象就是Compiler和Compilation ，它们是Plugin和webpack之间的桥梁。 Compiler和Compilation的含义如下。

• Compiler对象包含了webpack环境的所有配置信息，包含options、loaders、plugins等信息。
• Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。
  Compiler和Compilation 的区别在于：Compiler代表了整个webpack从启动到关闭的生命周期，而Compilation只代表一次新的编译。

开始编写

该插件可以在webpack名称是EndWebpackPlugin，作用是在webpack即将退出时再附加一些额外的操作，例如webpack成功构建后把生成的文件发布到服务器中。实现该插件，需要借助以下两个事件

• done:在成功构建并且输出文件后,webpack即将退出时发生
• failed:在构建出现异常时导致构建失败，webpack即将退出时发生
  插件代码如下

  // ./plugins/test.js
  class EndWebpackPlugin {
    constructor(doneCallback, failedCallback) {
        this.doneCallback = doneCallback
        this.failedCallback = failedCallback
    }
    apply(complier) {
        complier.plugin('done', data => {
            this.doneCallback(data)
        })
        complier.plugin('failed', err => {
            this.failedCallback(err)
        })
    }
  }
  module.exports = EndWebpackPlugin

  webpack.config.js代码如下

  const path = require('path')
  const EndWebpackPlugin = require('./plugins/test')
  module.exports = {
    entry: './index.js',
    module: {
        rules: [{
            test: /\.js$/,
            use: [{
                loader: path.resolve('loaders/test.js')
            }],
        }]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new EndWebpackPlugin(() => {
            console.log('构建成功')
        }, err => {
            console.log(err)
        })
    ]
  }