Compiler & Compilation

[00:00:00]
>> Sean Larkin: What I'm gonna talk to you about is the seven-ish tapable instances. And really, they're the most important pieces of webpack internally, the most important pieces. So the first one is called the compiler. It is the top level, it's central dispatch. If we even went back to these hooks here, and we looked at compiler, you can see the hooks are very top level.

[00:00:28]
They are controlling Win webpack's starts, Win webpack's finished bundling, Win it's about to emit assets, WIn before it compiles, even when it's in Watch Mode, right? So it's the central dispatch, as I like to say. And really to be able to access this or to access any other instance, you have to go through the compiler.

[00:00:52]
So also, what's really cool is that when you use the Node API, when you say, like an example of using the webpack Node API, you're actually dealing with the literal compiler instance. You get an instance of that that you basically call compiler.run. And then the second one is called the Compilation.

[00:01:17]
So the Compilation is really, it is the most I'll say most complex, most involved piece of webpack, it is the meat and potatoes, it's the heart of everything that happens. It is where webpack kicks off building the graph. It is where webpack then kicks off sealing it and then rendering it, and into bundles that you see today, and I call it the brain.

[00:01:48]
It's where everything happens. It contains the dependency graph traversal algorithm. It's created by the compiler. And I mean honestly I don't even feel like, I kind of like just pulling these up. Do you find that value to even look at them? I think it's kind of valuable. So if we look at compilation.js, like these are just literally like whatever I talked about.

[00:02:16]
It's that .js in our source code, right? So, if we look, you can see the amount of hooks. Holy Moly, these are all the events that you can tap into. So, everything is tiny, as when webpack for the first time creates a new instance of module. You can hook into that, and you get that module.

[00:02:33]
You could literally modify behavior of it. Or when webpack is about to start rendering and creating chunks and then putting modules into chunks and then flattening them and rendering into bundles. That's what the seal hook is. Or when split chunks is doing its thing, these are the hooks.

[00:02:52]
We rely on these hooks, too, ourselves, right? Because all of our code is plugins. So what's nice is you get to see statically upfront like what am I gonna get back when I call into this hook? And so you can see here literally it's everything. It's where we optimize every piece of code, it's where we topologically sort every module.

[00:03:14]
It's where scope hoisting happens. It's where we do tree shaking and all the heuristics for it. So that's the compilation.