webpack plugins

Do you know webpack is all written on top of its own plugins?

Yep, that is right!

On webpack, every single plugin is built on top of a composable interface called Tapable. This interface allows plugins to intercept/be on/get into all stages of the compilation!

Plugins are the most extensible and configurable thing in the world (it just loses for webpack itself which has dozens of configs).

You may ask:

how do I know which hooks are available where I need to access them?

Thank god at least for the `compiler` we have official documentation for it: https://webpack.js.org/api/compiler-hooks/

Now the other places, like the compilation or `NormalModuleFactory` where can I find them?

Well, it is easy! Go to the file you want to hit and look for the `hooks` property, like this one: https://github.com/webpack/webpack/blob/master/lib/NormalModuleFactory.js#L208

if I want to add something to the configuration before webpack starts compiling, I can do something like this:

And composability is what makes webpack the biggest elephant in the room, but is what gives us the most power over other tools!