Webpack Plugins System

Resolver & Module Factories

Sean Larkin

Sean Larkin

Webpack Plugins System

Check out a free preview of the full Webpack Plugins System course

The "Resolver & Module Factories" Lesson is part of the full, Webpack Plugins System course featured in this preview video. Here's what you'd learn in this lesson:

The Resolver instance asynchronously locates a module by its absolute path. Module Factories take successfully resolved requests and collect the source from the file to store the information in a module object.


Transcript from the "Resolver & Module Factories" Lesson

>> Sean Larkin: The next one is the resolver. So when I say a resolver, who knows here what a resolver is, or what it's purpose is? So a resolver is just a fancy word for, you give something, you give it a partial path, and it's gonna go make sure it exists, right, and give you the full absolute path.

When you use a required statement in node, it's running, basically you send it to the module resolver, right, to make sure it exists. Well, that's the same thing. We have created our own that's asynchronous on top of, and completely respecting of the node module algorithm. Well, so what happens is that, when you pass your entry point to webpack.

We take it, we give it to the resolver, and we say, hey, go find out if this exists, right? So it goes and does the search. It's like, okay, let's search relative to where this file is that called it. Okay, and let's go see, is there a file here?

Great, let's go ahead and return. Then what happens is, it returns back a bunch of extra information. So not only like, okay, it was in this folder, and here's the full request, right? If is this is the absolute path, and were there any query strings or anything weird tied to it?

We're gonna provide you that information as well. And so we take that, and we send it back, and provide more detailed information that other parts of webpack need. All right, so and as you can see, so what you might not know is that our resolver is actually something you can use outside webpack.

We published it to a separate package, called enhanced-resolve. So if you look inside our source code node modules, I peeked in my node modules, and you won't believe what I found. [LAUGH] All right, if you go to E, you actually see here that enhance-resolve is a separate library, and of course, all it is is plugins.

But we basically apply a metric ton of plugins based, the configurations for the resolve property in webpack, all just map to specific plugins, right? And so you can actually use this outside in another utility for node, or whatever. It's great, cuz it's way faster than node synchronize resolver and pluggable.

So you can do insane amounts of things when you can plug into this functionality and alter it. But really, there's not many hooks just besides like, hey, it's when we, well, I won't get too much into the resolver hooks. It's a little bit more complex. And if you get there, send me a DM on Twitter and we'll add you to a webpack slack, and you'll end up being a contributor to our project [LAUGH].

Okay, so the next is called the Module Factories. So who here knows in programming, what a factory does, or have heard of the term? If you're into Java or does C# have factories? I've never done C#. Maybe, I'm not sure, or if you used AngularJS. Factories, all they do is they create instances, right, they create objects.

That's the whole purpose. And so, to us, a module factory is gonna create a module instance, right? And I say module factories, because we have a couple different kinds. So if we went to our source code again in webpack, and we scroll through. Let's see, I go all the way down.

There's actually two module factories or two classes that end in module factory. One is the normal module factory, and of course, you can guess it creates normal module instances, which is another class. And it has a bunch of hooks as well. And then we also have a context module factory.

So the difference between them is supporting the expression inside of that dynamic import statement. That is a separate module factory. So a little bit maybe extra information you do need to care about. So module factories, it takes a successfully resolved request, right, all that beautiful information that we just got from the resolver.

And it's going to collect the source code. So it's actually going to pull the source code from the file. It's gonna store it in this module object in memory,
>> Sean Larkin: And then add some other information, as well. So when you think about it, here's the beautifully drawn diagram, where we take that awesome information we just got from the resolver.

We're gonna pass it through the module factory, and it's going to create a module object out of it, right?

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now