Webpack Plugins

[00:00:00]
>> Sean: And then finally, the last core concept is plugins. This is my favorite. When I found out about this, I think I truly my love deepened for Webpack at a much more foundational level. But first, I like talking about it just as it's anatomy. So what is a plugin for Webpack?

[00:00:22]
All it is is an instance. I usually say class but to be specific, it's just an instance. It's a JavaScript object that has an apply property in the prototype chain. And it allows you to hook into the entire Webpack life cycle of events. And we have a bunch that are built out of the box that are meant to be able to make things way easier for you.

[00:00:48]
So for example, here's a plugin here just like the source of it and I'll kinda talk about how what's happening here. So just like I said, there's a object where it's gonna create an instance of an object that has an apply method on the prototype chain and that apply method.

[00:01:07]
When you pass this plugin to Webpack, and I'll show you next how to add one. It's gonna pass itself as an instance so that this plugin can hook into different events. Now, this is using the Webpack 3 API for the plugin system, but tomorrow we'll probably about how we can either upgrade or how to write plugins for Webpack 4.

[00:01:29]
But the concepts are the same. So we're plugging in to the compiler and listening to a done event. And that event is gonna pass us some data. And then we're just going to have behavior based on what that data is. So, in this case, it looks like we're plugging into both the done and the failed event.

[00:01:46]
And we're writing to the stderr, like a specific character, which is actually a dinging noise in terminal. So, of course, that's why this is called BellOnBundlerErrorPlugin. We try to be pretty verbose about what it does. But yeah, this is a pretty simple plugin, from the highest level. And so of course since it is something that's instantiable, right?

[00:02:17]
We're gonna pass a new instance of it into our configuration. And so to do that we just have to require that plugin for wherever we installed it or maybe it's a custom plug in relative to where it is in your source. And just provide new and we wanted to make it instantiable one because you should be able to apply the same plugin multiple times if you want to or if it's valid.

[00:02:41]
And also be able to pass different types of arguments, options into the plugins themselves. So let's see here. And then my favorite part. Did you know 80% of the Webpack source code is made up of these plugins. Webpack itself is a completely event driven architecture. And so all of our source code is literally all of these plugins, and we love the architecture cuz it let's us dog food, not only this experience for you all, but it allows us to pivot really quickly.

[00:03:23]
We could instantly adopt a new feature without breaking anything. Or we could drop a feature really easily, and we could slowly deal with just a deprecation and barely have to manage it without breaking changes. And so yeah, that was my favorite part. I love the fact that it is built of that exact same plugin system that you use.

[00:03:48]
And so plugins really adds additional functionality. You could even say plugins let you do anything you can't do with a loader. Loaders are only applied on a profile basis, but with plugins, you can access a whole bundle, right? And so, things like UglifyJS. You wouldn't wanna run that through a loader because then you get less optimized minification, right.

[00:04:13]
Because the minifier doesn't know what other things are in the scope and whether it's used, it's only knowing about that file. And so therefore plugins are great, that's why we have UglifyJS plugin, or even compression or whatever. And so, you can think about it. When you wanna interact more with the compiler runtime, or the event lifecycle, or even just apply functionality at the bundle level, plugins are the way to go.

[00:04:43]
And I was, what?