Video: The Anatomy of Webpack: A Deep Dive Into Its Architecture

The video talk dives into the architecture of Webpack, a module bundler that transforms code into browser-compatible formats. It explains the role of the compiler as the central dispatch, managing the dependency graph and the build process. The talk highlights the importance of Webpack's plugin architecture, facilitated by Tappable, which allows developers to tap into hooks like compilation.hooks.SEAL and compilation.hooks.optimized. These hooks notify users of important events, enabling them to run custom code. The resolver in Webpack checks if the required paths exist and applies loaders, such as CSS loaders, to transform non-JavaScript files. The talk also covers how to use Webpack via configuration, command line interface, or Node API, starting with a configuration file to create a dependency graph. Finally, it showcases the creation of a basic plugin using the HelloCompilationPlugin class, illustrating how custom plugins can enhance Webpack's functionality.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.