At the heart of webpack lies a powerful architecture built from numerous plugins working together in perfect harmony. These plugins communicate and coordinate through tapable hooks, forming the backbone of webpack's extensibility. Although originally developed for webpack, tapable is a standalone library designed for building hook-based systems with JavaScript. It allows to expose well-structured extension points using a publish/subscribe model, where subscribers “tap” into hooks and publishers “call” them when those hooks are triggered.
In one of my projects, I follow the same philosophy that webpack's core is largely shaped by its internal plugins. To support this approach, I use tapable as the foundation for managing extension lifecycles and facilitating internal communication. From time to time, understanding how hooks behave during runtime became necessary. So I developed a reusable tracer that captures hook registrations and calls, revealing their runtime interactions as a stack trace and exporting the data as UML diagram for further analysis and visualization.
Once the code was ready, I immediately wanted to put it to the test on the legendary project webpack itself. To achieve this, I wrote a webpack plugin that introduces every hook in the webpack compiler to the tracer.
The exciting dynamic tracing produced a detailed UML diagram revealing how webpack's internal hooks interact during runtime. Below is the visualization showing these connections.
Try the interactive visualizations below:
SVG versions:
Using the same tracing plugin introduced earlier, I attached a tracer to the underlying webpack compiler used by Next.js. This revealed a sequence of hooks, some inherited from webpack, others custom-defined. Follow the links to see them in action.
Interactive visualization:
SVG versions:
The full source code is available on GitHub repository, along with a complete list of features, usage examples, configuration options, and deeper technical details about the implementation. Enjoy them for how oddly interesting they can be.
Keep tapping. 🍀