webpack 的 plugin 实现

最新推荐文章于 2024-07-22 10:39:47 发布

ALKEN ABBY

最新推荐文章于 2024-07-22 10:39:47 发布

阅读量188

点赞数 1

分类专栏： webpack 日积月累(学习深度) 开发中的实用方法和函数文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/qq_45803050/article/details/126802323

版权

开发中的实用方法和函数同时被 3 个专栏收录

54 篇文章 0 订阅

订阅专栏

日积月累(学习深度)

30 篇文章 2 订阅

订阅专栏

webpack

3 篇文章 0 订阅

订阅专栏

一个 webpack plugin 基本包含以下几步：

一个 JavaScript 函数或者类
在函数原型（prototype）中定义一个注入compiler对象的apply方法。
apply函数中通过compiler插入指定的事件钩子，在钩子回调中拿到compilation对象
使用compilation操纵修改webapack内部实例数据。
异步插件，数据处理完后使用callback回调

最后会实现一个简单的 clean-webpack-plugin。

class WebpackCleanupPlugin {
  // 构造函数
  constructor(options) {
    console.log("WebpackCleanupPlugin", options);
  }
  // 应用函数
  apply(compiler) {
    console.log(compiler);
    // 绑定钩子事件
    compiler.plugin("done", compilation => {
      console.log(compilation);
    });
  }
}

Compiler 对象包含了 Webpack 环境所有的的配置信息，包含 options，hook，loaders，plugins 这些信息，这个对象在 Webpack 启动时候被实例化，它是全局唯一的，可以简单地把它理解为 Webpack 实例

Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。当 Webpack 以开发模式运行时，每当检测到一个文件变化，一次新的 Compilation 将被创建。Compilation 对象也提供了很多事件回调供插件做扩展。通过 Compilation 也能读取到 Compiler 对象。

Compiler 和 Compilation 的区别在于：Compiler 代表了整个 Webpack 从启动到关闭的生命周期，而 Compilation 只是代表了一次新的编译。

参考资料：
http://webpack.wuhaolin.cn/
https://juejin.cn/post/6844903935837208584#comment