Plugin

定义

plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务。

plugin-run 👆🏻图片地址

tip

正在学习中

Compiler && Compilation

在理解或者开发插件之前，必须要理解两个最重要的概念就是 Compiler 和 Compilation。理解它们是最重要一步。

Compiler

整个 Webpack 配置的实例

Compilation

Compilation 继承自 Compiler，它是动态的资源集合，包含了 chunks, modules, cache, assets, 在某个编译阶段，产生的编译资源是不相同的。每个阶段都会有各自的Compilation

生命周期

compile: 进入编辑环境, 开始编译
compilation: 创建 compilation 对象
make: compilation 实例启动对代码的编译和构建
optimize: 开始优化阶段
after-compile: 编译完成
emit: 所有打包生成的文件内容按照依赖图已经处理完毕, (最后一处添加资源到资源集合的地方)
after-emit: 编译后的文件已经输出到目标目录
done: 整体代码的构建工作结束时触发

// 1
compiler.plugin('compile', function (params) {
    // compile
});
// 2
compiler.plugin('compilation', function (compilation, params) {
    // compilation
    // 4
    compilation.plugin('optimize', function () {
        // optimize
    });
});
// 3
compiler.plugin('make', function (compiler, callback) {
    // make
    callback();
});
// 5
compiler.plugin('after-compile', function (compilation) {
    // after-compile
});
// 6
compiler.plugin('emit', function (compilation, callback) {
    // emit
    callback();
});
// 7
compiler.plugin('after-emit', function (compilation) {
    // after-emit
})

写一个Plugin

export default class MyPlugin {
    constructor(options) {
        this.options = options;
    }

    apply(compiler, () => {})
}

参考资料

Webpack Plugins

Webpack loaders vs plugins; what's the difference?

webpack 中 loader 和 plugin 的区别是什么

Plugin

定义​

Compiler && Compilation​

Compiler​

Compilation​

生命周期​

写一个Plugin​

参考资料​

定义