Tapable: a look at webpack’s plugin system

Many JavaScript libraries today have a variety of endpoints for customization. I would like to share with you ‘Tapable’, webpack’s 235 line library that is the backbone of webpack. In addition to this, we will look at the ups and the downs of this system and what we have learned along the way!!

webpack is a JavaScript module bundler that has taken the world by storm. One of the core principals behind webpack is that it is flexible, powerful, and agnostic to workflow, framework, and stack. We do this today through a 235 line plugin library: Tapable. We will stroll through the webpack source and teach you how webpack implements Tapable as a plugin architecture. Along the way, we will learn about the anatomy of a webpack plugin, how webpack uses plugins internally, and explain the advantages and disadvantages of using it.  My goal is for you to walk away with a complete understanding of webpack from the inside-out, able to understand design patters for basic plugin architecture, allowing you to leverage this knowledge to implement your own plugin system, or help make existing ones more powerful!

As a webpack maintainer, I think this is a unique opportunity to represent an expert in the field of build systems and tooling’s for JavaScript modern web applications. My hope is that this talk not only interests non-webpack users, rather inspires people to create even more unique and power plugin systems.