Webpack 通过 Plugin 机制让其更加灵活,以适应各种应用场景。 在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。
Plugin示例代码:通过 compiler.plugin(事件名称, 回调函数)
监听到 Webpack 广播出来的事件。 并且可以通过 compiler 对象去操作 Webpack
class BasicPlugin{ // 在构造函数中获取用户给该插件传入的配置 constructor(options){ } // Webpack 会调用 BasicPlugin 实例的 apply 方法给插件实例传入 compiler 对象 apply(compiler){ compiler.plugin('compilation',function(compilation) { }) } } // 导出 Plugin module.exports = BasicPlugin;
在webpack上使用编写的plugin代码
const BasicPlugin = require('./BasicPlugin.js'); module.export = { plugins:[ new BasicPlugin(options), ] }
plugin也可以给其他plugin广播事件
/** * 广播出事件 * event-name 为事件名称,注意不要和现有的事件重名 * params 为附带的参数 */ compiler.apply('event-name',params); /** * 监听名称为 event-name 的事件,当 event-name 事件发生时,函数就会被执行。 * 同时函数中的 params 参数为广播事件时附带的参数。 */ compiler.plugin('event-name',function(params) { });