Fancy Front End Fancy Front End
  • 开始上手
  • 基础
  • 调度器(Scheduler)
  • 更新器(Updater)
  • 渲染器(Render)
  • 更新周期
  • hooks 原理
  • 总结
  • 📙 React源码漂流记
  • 开始上手
  • 基础
  • reactivity
  • runtime-core
  • runtime-dom
  • Awesome Web
  • Awesome NodeJS
话题
  • 导航
  • Q&A
  • 幻灯片
  • 关于
  • 分类
  • 标签
  • 归档
博客 (opens new window)
GitHub (opens new window)

Jonsam NG

让有意义的事变得有意思,让有意思的事变得有意义
  • 开始上手
  • 基础
  • 调度器(Scheduler)
  • 更新器(Updater)
  • 渲染器(Render)
  • 更新周期
  • hooks 原理
  • 总结
  • 📙 React源码漂流记
  • 开始上手
  • 基础
  • reactivity
  • runtime-core
  • runtime-dom
  • Awesome Web
  • Awesome NodeJS
话题
  • 导航
  • Q&A
  • 幻灯片
  • 关于
  • 分类
  • 标签
  • 归档
博客 (opens new window)
GitHub (opens new window)
  • 开始上手
  • Plan 计划
  • typescript-utility

  • single-spa源码

  • qiankun源码

  • webpack

    • 开始阅读
    • tapable源码

      • 本章概要
        • 什么是 tapable?
        • 什么是发布订阅模式?
        • 参考
      • Api概述
      • Hook
      • HookCodeFactory
    • init阶段

    • make阶段

    • 总结

  • axios

  • solid

  • vite源码

  • jquery源码

  • snabbdom

  • am-editor

  • html2canvas

  • express

  • acorn源码

  • immutable.js源码

  • web
  • webpack
  • tapable源码
jonsam
2022-04-20
目录

本章概要

webpack 核心代码只是提供 options、compilation、module、loader-runner(使用 loader-runner 包)、JavascriptParser(使用 acorn 包) 等模块的功能,但是其强大的功能还得得益于其强大的 loader 机制和 plugin 机制,这使得 webpack 拥有功能丰富的生态。

本章内容探讨 webpack 插件机制的核心包,tapable 的原理。

# 什么是 tapable?

Tapable 是由 webpack 项目维护的,在 webpack 插件机制中起到重要作用的核心包,它使用 发布订阅模式 实现强大的 Hook 机制。

# 什么是发布订阅模式?

::: rem MDN:Publish–subscribe pattern In software architecture, publish–subscribe is a messaging pattern where senders of messages, called publishers, do not program the messages to be sent directly to specific receivers, called subscribers, but instead categorize published messages into classes without knowledge of which subscribers, if any, there may be. Similarly, subscribers express interest in one or more classes and only receive messages that are of interest, without knowledge of which publishers, if any, there are. :::

发布订阅模式有如下几个特点:

  • 发布者不直接将消息发送给订阅者。
  • 发布者发送消息而不关心订阅者是谁。
  • 订阅者接受消息而不关心发布者是谁。

参考:

  • 理解【观察者模式】和【发布订阅】的区别 - 掘金 (opens new window)

发布订阅的应用案例:

  • Redux 中的 subscribe 和 dispatch。
  • Vue 响应式原理中 effects、track 和 trigger。
  • Node.js 中的 EventEmitter 模块实现的发布订阅。

# 参考

  • webpack/tapable: Just a little module for plugins. (opens new window)
  • webpack 核心模块 tapable 用法解析 - _蒋鹏飞 - 博客园 (opens new window)
  • tapable 详解_风火一回的博客 - CSDN 博客_tapable (opens new window)
  • [源码解读] Webpack 插件架构深度讲解 (opens new window)
编辑 (opens new window)
上次更新: 2022/09/06, 14:25:16
开始阅读
Api概述

← 开始阅读 Api概述→

最近更新
01
渲染原理之组件结构与 JSX 编译
09-07
02
计划跟踪
09-06
03
开始上手
09-06
更多文章>
Theme by Vdoing | Copyright © 2022-2022 Fancy Front End | Made by Jonsam by ❤
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式