一个超简单的Webpack自定义Plugin

前言

这是一个在学习webpack的过程中，随便写的一个非常简单的webpack plugin demo。

功能

主要功能就是在完成编译后进行log输出。

代码

自定义plugin代码

class EndingConsolePlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler) {
        // console.log('compiler:', compiler)
        console.log('compiler ----- options:', this.options);
        const { text } = this.options;
        // 监听生命周期函数done
        compiler.hooks.done.tap('EndingConsolePlugin', function () {
            console.log(`=================== ${text || 'EndingConsolePlugin'} done ===================`);
        })
    }
}
module.exports = EndingConsolePlugin;

webpack配置

plugins: [
  new EndingConsolePlugin({
      text: 'Ending-console-plugin'
    })
]

结束语

这只是我在读webpack文档的过程中写的一个简单的demo。以后可以考虑通过监听生命周期钩子函数，写一个具有复杂功能的plugin。