webpack-plugin详解

最新推荐文章于 2024-07-18 01:54:28 发布

奶昔不会射手

最新推荐文章于 2024-07-18 01:54:28 发布

阅读量241

点赞数 3

文章标签： webpack 前端 node.js

本文链接：https://blog.youkuaiyun.com/lth002/article/details/137127269

版权

本文介绍了如何在Webpack中创建自定义插件，重点讲解了apply方法的使用，以及sync、async和asyncpromise类型的hook函数，如entryOption钩子的tap和tapAsync/tapPromise实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

plugin其实就是一个类，类里面有一个apply方法，这个方法接收一个参数compiler，这个参数保存着webpack完整的配置，可以对其进行操作，来实现自定义的plugin了
webpack还提供了一系列的钩子函数，类似于vue的生命周期，可以在不同的钩子函数中进行操作
操作分为三种，同步、异步、异步promis

tap:可以注册同步钩子和异步钩子
tapAsync:回调方式注册异步钩子
tapPromise:Promise方式注册异步钩子

class MyPlugin {
  constructor() {}
  apply(compiler) {
    //entryOption 在 webpack 选项中的 entry 被处理过之后调用
    compiler.hooks.entryOption.tap("abc", (context, entry) => {
      console.log(entry);
    });
  }
}
module.exports = MyPlugin;