In this video, we're going to work on a very small project and get a better understanding of what Watpac
is really doing during this bundling process, as I mentioned, this knowledge is going to be super
critical once we start to try to understand how to link up all these different imports inside of our
application.
So to get started, I can go over to my terminal.
We're going to generate a new project.
We're going to install Web back into it.
We're then going to run, run Web pack a couple of times and just examine what Watpac is doing behind
the scenes.
So I'm inside of a workspace directory of sorts.
I'm going to make a new folder called Bundler.
I'll change into that directory.
I'll then generate a new package, not just on file with a minute Dashi.
After that, I'm going to install two modules, they'll do an install, dash, dash, save exact throughout
this entire course, I'm going to give you explicit versions of all the different modules we install
just to make sure that you and I are running the exact same code.
Part of this process is to make sure that you always do the installation with this same exact flag.
So make sure you get that on there.
We're then going to get back at five point one, one point one and Watpac Dash Seelie at four point
three point zero.
I'm going to run that.
And after a very brief pause, we should get those two modules, once I've installed both those, I'll
then open up my code editor inside of this directory.
So instead of you're I'm going to first begin by creating an SASE directory and then we're going to
create two files, very similar to the one we just had back inside this diagram.
So I'm going to make an RC folder.
Inside, they're all then make a new file of index dogs.
And another oops.
Of message, James.
Inside a message, James, I'm going to first begin by writing out a little bit of common James syntax
to just declare a string and export, it will say module exports.
Is I there?
Then back inside of index.
I'm going to require in oops, there we go.
That message file and then do a console log.
Of the message.
There is two very basic modules, let's now set up Web back to run inside of our project.
We're going to execute Watpac and see how it somehow bundles together or links together these two different
files.
So I'm going to go into my package, JSON file.
I'm going to find the script section and replace the existing test script with the new one that I will
call Build.
Whenever we execute this build script, we are going to run web back.
Dash dash mode equals development like so.
OK, so let's now go back over to our terminal, we're going to run that Bild script and then examine
the output.
So back at my terminal.
I'm still inside my project directory.
I'll do an NPM run build.
Well, then, just a little bit of output right there.
Let's go back over to our code editor and just see what happened.
So we don't really see any immediate result, but if you look at your file folder structure here on
the left hand side, you'll notice a new file called Dist.
So Watpac is automatically found the index JS file.
It has read the contents of that file and noticed that we attempted to require in the message module,
it then linked together these two different modules and then save the output inside this main file.
So let's take a look at Manges and see what really happened.
Now, as soon as you open this up, you're going to notice that there is a lot of stuff going on inside
of here.
It looks like there's a lot of extra code that Watpac has added in automatically.
Just to save us a little bit of time, I ran this NPM run build command right before this video, I
took the output, the same output you see right here.
I removed all the comments and reformatted the code just a little bit to make it easier to understand.
So I'm going to replace the contents of my main file.
With this reformatted version, this is not the exact identical code to what you have, like I said,
I have cleaned it up a pretty good amount, but it's essentially the exact same thing, more or less.
So this is what WABAC is really spitting out.
Let's take a look at this and really understand what Watpac is doing for us.
The first I want to point out that down here at the very bottom is clearly the contents of the index
JS file is the message variable.
There's the console log that we have written into.
Index is also up here at the top.
It looks like there is an object and I've got some key right there of messages.
That is pointing at a function and the contents of the function appears to be identical to what we had
written into the message that James file.
So it looks like what Watpac has really done here is injected in this extra function right here and
somehow reference that function instead of the normal required statement we had written in, let's now
try to follow this entire code path and really understand what's going on.
The first thing that's going to run beyond just declaring this object and declaring this function is
the contents of our index file inside there, we're going to call this new weapon, require function
and pass in the name or the idea, the module that we're trying to get access to that is going to run
this function right here.
Module ID is going to be equal to that string.
The first thing that's going to occur, Watpac is going to try to find the module that we are looking
for inside this Watpac module's object, they're essentially going to take that function right there
and assign it to this variable of module form or module function.
What Watpac then declares a variable called module, which looks pretty much like that module, but
experts thing, and it passes that object into the module function.
So we can imagine that this object right here is going to show up as that argument and we're then going
to assign a guy there to the model that exports property.
We then return that module that exports property, so at the end of the day, kind of skipping those
middle steps, we can almost imagine that is Watpac require function, almost looks like this.
We just kind of remove those extra middle steps.
And so now if our code is just this, you can very easily see that.
Well, coming back from this WABAC require is something like, hi there, we assign that to message
and then we can't log out that value.
So obviously, I have really trimmed up the code inside of here and I've greatly simplified it, but
this is pretty much what is going on behind the scenes with Watpac.
It takes all these different files, joins them together into one single file, and then sets up this
new kind of weapon, require function whenever you try to require some other file.
Watpac is going to change that into a call to Watpac require.
And we're essentially going to run some code inside of some other module, get some result and then
return it back to wherever you would call to require from.
Once again, I know I've really shortened out the execution here, I just want you to kind of get a
flavor of what is going on behind the scenes.
OK, now we've seen this let's take a pause right here and just take a look at one other variation of
Watpac in just a moment.