1
00:00:00,890 --> 00:00:04,939
In this video, we're going to work on a very small project and get a better understanding of what Watpac

2
00:00:04,939 --> 00:00:09,020
is really doing during this bundling process, as I mentioned, this knowledge is going to be super

3
00:00:09,020 --> 00:00:13,460
critical once we start to try to understand how to link up all these different imports inside of our

4
00:00:13,460 --> 00:00:14,060
application.

5
00:00:14,550 --> 00:00:16,640
So to get started, I can go over to my terminal.

6
00:00:16,940 --> 00:00:18,500
We're going to generate a new project.

7
00:00:18,500 --> 00:00:20,120
We're going to install Web back into it.

8
00:00:20,390 --> 00:00:25,310
We're then going to run, run Web pack a couple of times and just examine what Watpac is doing behind

9
00:00:25,310 --> 00:00:25,820
the scenes.

10
00:00:26,420 --> 00:00:28,460
So I'm inside of a workspace directory of sorts.

11
00:00:28,700 --> 00:00:31,160
I'm going to make a new folder called Bundler.

12
00:00:32,080 --> 00:00:33,550
I'll change into that directory.

13
00:00:34,090 --> 00:00:39,790
I'll then generate a new package, not just on file with a minute Dashi.

14
00:00:41,800 --> 00:00:49,570
After that, I'm going to install two modules, they'll do an install, dash, dash, save exact throughout

15
00:00:49,570 --> 00:00:54,610
this entire course, I'm going to give you explicit versions of all the different modules we install

16
00:00:54,850 --> 00:00:57,190
just to make sure that you and I are running the exact same code.

17
00:00:57,470 --> 00:01:01,680
Part of this process is to make sure that you always do the installation with this same exact flag.

18
00:01:01,690 --> 00:01:02,770
So make sure you get that on there.

19
00:01:03,580 --> 00:01:13,270
We're then going to get back at five point one, one point one and Watpac Dash Seelie at four point

20
00:01:13,270 --> 00:01:14,290
three point zero.

21
00:01:15,630 --> 00:01:16,310
I'm going to run that.

22
00:01:18,400 --> 00:01:23,260
And after a very brief pause, we should get those two modules, once I've installed both those, I'll

23
00:01:23,260 --> 00:01:25,960
then open up my code editor inside of this directory.

24
00:01:30,340 --> 00:01:33,790
So instead of you're I'm going to first begin by creating an SASE directory and then we're going to

25
00:01:33,790 --> 00:01:37,390
create two files, very similar to the one we just had back inside this diagram.

26
00:01:38,110 --> 00:01:40,330
So I'm going to make an RC folder.

27
00:01:41,500 --> 00:01:45,580
Inside, they're all then make a new file of index dogs.

28
00:01:46,650 --> 00:01:48,180
And another oops.

29
00:01:49,130 --> 00:01:51,080
Of message, James.

30
00:01:52,480 --> 00:01:57,820
Inside a message, James, I'm going to first begin by writing out a little bit of common James syntax

31
00:01:58,060 --> 00:02:02,320
to just declare a string and export, it will say module exports.

32
00:02:02,590 --> 00:02:04,450
Is I there?

33
00:02:06,340 --> 00:02:07,900
Then back inside of index.

34
00:02:08,810 --> 00:02:11,960
I'm going to require in oops, there we go.

35
00:02:13,190 --> 00:02:15,590
That message file and then do a console log.

36
00:02:16,760 --> 00:02:17,570
Of the message.

37
00:02:19,100 --> 00:02:24,810
There is two very basic modules, let's now set up Web back to run inside of our project.

38
00:02:24,860 --> 00:02:29,750
We're going to execute Watpac and see how it somehow bundles together or links together these two different

39
00:02:29,750 --> 00:02:30,230
files.

40
00:02:30,930 --> 00:02:32,920
So I'm going to go into my package, JSON file.

41
00:02:33,680 --> 00:02:39,140
I'm going to find the script section and replace the existing test script with the new one that I will

42
00:02:39,140 --> 00:02:39,950
call Build.

43
00:02:40,700 --> 00:02:44,380
Whenever we execute this build script, we are going to run web back.

44
00:02:44,720 --> 00:02:48,650
Dash dash mode equals development like so.

45
00:02:52,020 --> 00:02:56,910
OK, so let's now go back over to our terminal, we're going to run that Bild script and then examine

46
00:02:56,920 --> 00:02:57,450
the output.

47
00:02:58,100 --> 00:02:59,010
So back at my terminal.

48
00:02:59,970 --> 00:03:01,680
I'm still inside my project directory.

49
00:03:01,950 --> 00:03:03,840
I'll do an NPM run build.

50
00:03:05,590 --> 00:03:07,510
Well, then, just a little bit of output right there.

51
00:03:07,780 --> 00:03:10,480
Let's go back over to our code editor and just see what happened.

52
00:03:12,040 --> 00:03:16,450
So we don't really see any immediate result, but if you look at your file folder structure here on

53
00:03:16,450 --> 00:03:18,850
the left hand side, you'll notice a new file called Dist.

54
00:03:19,450 --> 00:03:22,360
So Watpac is automatically found the index JS file.

55
00:03:23,290 --> 00:03:28,330
It has read the contents of that file and noticed that we attempted to require in the message module,

56
00:03:28,780 --> 00:03:34,210
it then linked together these two different modules and then save the output inside this main file.

57
00:03:34,690 --> 00:03:37,500
So let's take a look at Manges and see what really happened.

58
00:03:38,500 --> 00:03:42,280
Now, as soon as you open this up, you're going to notice that there is a lot of stuff going on inside

59
00:03:42,280 --> 00:03:42,580
of here.

60
00:03:42,800 --> 00:03:46,870
It looks like there's a lot of extra code that Watpac has added in automatically.

61
00:03:48,720 --> 00:03:53,790
Just to save us a little bit of time, I ran this NPM run build command right before this video, I

62
00:03:53,790 --> 00:03:55,920
took the output, the same output you see right here.

63
00:03:56,070 --> 00:04:00,870
I removed all the comments and reformatted the code just a little bit to make it easier to understand.

64
00:04:01,320 --> 00:04:04,860
So I'm going to replace the contents of my main file.

65
00:04:05,970 --> 00:04:11,220
With this reformatted version, this is not the exact identical code to what you have, like I said,

66
00:04:11,220 --> 00:04:15,770
I have cleaned it up a pretty good amount, but it's essentially the exact same thing, more or less.

67
00:04:16,410 --> 00:04:18,480
So this is what WABAC is really spitting out.

68
00:04:18,690 --> 00:04:21,300
Let's take a look at this and really understand what Watpac is doing for us.

69
00:04:21,870 --> 00:04:26,530
The first I want to point out that down here at the very bottom is clearly the contents of the index

70
00:04:26,660 --> 00:04:29,460
JS file is the message variable.

71
00:04:29,460 --> 00:04:31,380
There's the console log that we have written into.

72
00:04:31,380 --> 00:04:34,410
Index is also up here at the top.

73
00:04:34,410 --> 00:04:39,310
It looks like there is an object and I've got some key right there of messages.

74
00:04:40,300 --> 00:04:44,950
That is pointing at a function and the contents of the function appears to be identical to what we had

75
00:04:44,950 --> 00:04:46,750
written into the message that James file.

76
00:04:47,640 --> 00:04:53,130
So it looks like what Watpac has really done here is injected in this extra function right here and

77
00:04:53,130 --> 00:04:58,050
somehow reference that function instead of the normal required statement we had written in, let's now

78
00:04:58,050 --> 00:05:01,250
try to follow this entire code path and really understand what's going on.

79
00:05:02,730 --> 00:05:07,410
The first thing that's going to run beyond just declaring this object and declaring this function is

80
00:05:07,410 --> 00:05:13,260
the contents of our index file inside there, we're going to call this new weapon, require function

81
00:05:13,260 --> 00:05:18,690
and pass in the name or the idea, the module that we're trying to get access to that is going to run

82
00:05:18,690 --> 00:05:19,560
this function right here.

83
00:05:20,160 --> 00:05:22,830
Module ID is going to be equal to that string.

84
00:05:24,100 --> 00:05:28,630
The first thing that's going to occur, Watpac is going to try to find the module that we are looking

85
00:05:28,630 --> 00:05:34,240
for inside this Watpac module's object, they're essentially going to take that function right there

86
00:05:34,690 --> 00:05:38,350
and assign it to this variable of module form or module function.

87
00:05:39,300 --> 00:05:44,400
What Watpac then declares a variable called module, which looks pretty much like that module, but

88
00:05:44,400 --> 00:05:48,450
experts thing, and it passes that object into the module function.

89
00:05:49,470 --> 00:05:54,360
So we can imagine that this object right here is going to show up as that argument and we're then going

90
00:05:54,360 --> 00:05:57,690
to assign a guy there to the model that exports property.

91
00:05:59,780 --> 00:06:04,520
We then return that module that exports property, so at the end of the day, kind of skipping those

92
00:06:04,520 --> 00:06:10,730
middle steps, we can almost imagine that is Watpac require function, almost looks like this.

93
00:06:10,970 --> 00:06:13,330
We just kind of remove those extra middle steps.

94
00:06:14,150 --> 00:06:17,720
And so now if our code is just this, you can very easily see that.

95
00:06:17,750 --> 00:06:23,810
Well, coming back from this WABAC require is something like, hi there, we assign that to message

96
00:06:23,810 --> 00:06:25,610
and then we can't log out that value.

97
00:06:26,830 --> 00:06:31,180
So obviously, I have really trimmed up the code inside of here and I've greatly simplified it, but

98
00:06:31,180 --> 00:06:33,650
this is pretty much what is going on behind the scenes with Watpac.

99
00:06:33,890 --> 00:06:39,010
It takes all these different files, joins them together into one single file, and then sets up this

100
00:06:39,010 --> 00:06:44,530
new kind of weapon, require function whenever you try to require some other file.

101
00:06:44,830 --> 00:06:47,800
Watpac is going to change that into a call to Watpac require.

102
00:06:48,220 --> 00:06:53,240
And we're essentially going to run some code inside of some other module, get some result and then

103
00:06:53,260 --> 00:06:55,870
return it back to wherever you would call to require from.

104
00:06:56,830 --> 00:07:00,700
Once again, I know I've really shortened out the execution here, I just want you to kind of get a

105
00:07:00,700 --> 00:07:02,650
flavor of what is going on behind the scenes.

106
00:07:03,630 --> 00:07:07,800
OK, now we've seen this let's take a pause right here and just take a look at one other variation of

107
00:07:07,800 --> 00:07:08,970
Watpac in just a moment.