- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.450 --> 00:00:04.110
In this guide, we are gonna talk about webpack.
2
00:00:04.110 --> 00:00:07.840
Now, webpack is a massive library
3
00:00:07.840 --> 00:00:10.330
and we're not gonna fit everything
4
00:00:10.330 --> 00:00:12.420
about webpack into one guide.
5
00:00:12.420 --> 00:00:14.420
In fact, I've seen entire courses
6
00:00:14.420 --> 00:00:19.110
that all they are are teaching you how to use webpack.
7
00:00:19.110 --> 00:00:20.960
So I do not want you
8
00:00:20.960 --> 00:00:23.930
to have to worry a ton about it right now.
9
00:00:23.930 --> 00:00:25.270
If you're going through this course,
10
00:00:25.270 --> 00:00:28.810
it means that you are working your way up
11
00:00:28.810 --> 00:00:31.890
and learning React and learning these kinds of tools.
12
00:00:31.890 --> 00:00:34.820
I want you to have more of a high-level knowledge
13
00:00:34.820 --> 00:00:36.640
of what webpack does.
14
00:00:36.640 --> 00:00:39.300
You're gonna be able to see the webpack code
15
00:00:39.300 --> 00:00:42.740
that I put together and you'll start to get an idea
16
00:00:42.740 --> 00:00:43.890
for what it does
17
00:00:43.890 --> 00:00:46.230
and then at the very end of this guide,
18
00:00:46.230 --> 00:00:47.820
I'm actually gonna have you go
19
00:00:47.820 --> 00:00:52.580
and create a very small webpack-based program,
20
00:00:52.580 --> 00:00:55.410
and you're gonna follow a full-written guide
21
00:00:55.410 --> 00:00:58.000
directed straight from them.
22
00:00:58.000 --> 00:01:00.100
So that's gonna be something to do in addition,
23
00:01:00.100 --> 00:01:02.470
and completely separate from this course.
24
00:01:02.470 --> 00:01:05.160
But it's gonna be very much worth your time,
25
00:01:05.160 --> 00:01:08.560
especially if you're looking to get a front-end job
26
00:01:08.560 --> 00:01:11.410
or a full stack development job,
27
00:01:11.410 --> 00:01:13.003
starting to get some webpack knowledge
28
00:01:13.003 --> 00:01:16.040
is really gonna help you along that way.
29
00:01:16.040 --> 00:01:17.850
So let's get started.
30
00:01:17.850 --> 00:01:21.550
If you look at this webpack directory,
31
00:01:21.550 --> 00:01:23.540
this is in the root of the application,
32
00:01:23.540 --> 00:01:25.230
so we're out of the src directory.
33
00:01:25.230 --> 00:01:26.840
If you look at webpack here,
34
00:01:26.840 --> 00:01:30.420
these are gonna be some configuration files.
35
00:01:30.420 --> 00:01:32.290
Now, one thing I wanna say here
36
00:01:32.290 --> 00:01:36.780
is that you can build React applications,
37
00:01:36.780 --> 00:01:40.170
pretty much a unlimited number of ways.
38
00:01:40.170 --> 00:01:43.110
The template that we're working through
39
00:01:43.110 --> 00:01:45.080
is how I personally build them
40
00:01:45.080 --> 00:01:46.973
and it works really well for me.
41
00:01:48.897 --> 00:01:51.500
If you try to create a React application completely
42
00:01:51.500 --> 00:01:53.790
from scratch you might not even have
43
00:01:53.790 --> 00:01:56.290
a webpack directory here.
44
00:01:56.290 --> 00:01:57.960
What this allows us to do
45
00:01:57.960 --> 00:02:02.240
is to bundle and organize all of these processes.
46
00:02:02.240 --> 00:02:03.430
So you may have thought
47
00:02:03.430 --> 00:02:05.310
and it may have been something
48
00:02:05.310 --> 00:02:09.510
that you're wondering, how does the application know
49
00:02:09.510 --> 00:02:13.130
to look at the index file or the bootstrap file
50
00:02:13.130 --> 00:02:14.640
or the vendor file
51
00:02:14.640 --> 00:02:16.850
or all of those things that we went through
52
00:02:16.850 --> 00:02:18.400
in the src directory?
53
00:02:18.400 --> 00:02:20.290
How do all those things happen?
54
00:02:20.290 --> 00:02:22.950
I can tell you, they don't happen by magic.
55
00:02:22.950 --> 00:02:24.970
We actually have to tell them
56
00:02:24.970 --> 00:02:28.580
what to do in order for our application to run.
57
00:02:28.580 --> 00:02:31.380
We need to connect all the dots,
58
00:02:31.380 --> 00:02:33.320
and that's one of the things
59
00:02:33.320 --> 00:02:35.100
that webpack allows us to do.
60
00:02:35.100 --> 00:02:39.170
It allows us to configure how our applications are set up
61
00:02:39.170 --> 00:02:41.060
and then from there,
62
00:02:41.060 --> 00:02:44.520
it also even runs our local server.
63
00:02:44.520 --> 00:02:46.170
So it's doing a lot of work.
64
00:02:46.170 --> 00:02:49.160
That's the reason why webpack is such a massive tool.
65
00:02:49.160 --> 00:02:51.660
There's no way we're gonna through it in one guide
66
00:02:51.660 --> 00:02:54.120
but I do wanna give you an introduction to it
67
00:02:54.120 --> 00:02:57.660
so you can see what it does at a high level
68
00:02:57.660 --> 00:03:00.130
and then how we're using it
69
00:03:00.130 --> 00:03:01.678
to build our applications.
70
00:03:01.678 --> 00:03:03.900
So in this webpack directory,
71
00:03:03.900 --> 00:03:05.672
what I've done is I've created
72
00:03:05.672 --> 00:03:08.960
four different JavaScript files.
73
00:03:08.960 --> 00:03:11.960
I technically could have just put all of this in one
74
00:03:11.960 --> 00:03:14.310
but that's not my favorite approach.
75
00:03:14.310 --> 00:03:18.000
I like to separate them into common modules.
76
00:03:18.000 --> 00:03:20.590
So these are things that no matter
77
00:03:20.590 --> 00:03:23.940
if the application's running on our local system
78
00:03:23.940 --> 00:03:28.029
or if it's up on a server running on production,
79
00:03:28.029 --> 00:03:29.910
these are different tools
80
00:03:29.910 --> 00:03:32.250
that the application's gonna need.
81
00:03:32.250 --> 00:03:35.750
The next file is a dev file.
82
00:03:35.750 --> 00:03:38.680
What this is is it's a configuration file
83
00:03:38.680 --> 00:03:41.340
for elements that are specific
84
00:03:41.340 --> 00:03:43.540
to the development environment.
85
00:03:43.540 --> 00:03:46.690
So when we're working on our local machine,
86
00:03:46.690 --> 00:03:51.010
we are in what is called the dev environment.
87
00:03:51.010 --> 00:03:52.840
When we're working on,
88
00:03:52.840 --> 00:03:55.060
or when we deploy our application
89
00:03:55.060 --> 00:03:57.480
to a server and it's running
90
00:03:57.480 --> 00:03:59.360
so that users are using it,
91
00:03:59.360 --> 00:04:02.060
that is what's called the production environment
92
00:04:02.060 --> 00:04:04.100
and that is this file right here,
93
00:04:04.100 --> 00:04:06.460
this prod file, the fourth one.
94
00:04:06.460 --> 00:04:09.000
So all of the elements,
95
00:04:09.000 --> 00:04:12.170
all the code you're gonna see in the dev file,
96
00:04:12.170 --> 00:04:15.420
that's specific to our local work.
97
00:04:15.420 --> 00:04:19.280
Everything in the prod file is gonna be specific
98
00:04:19.280 --> 00:04:22.050
to work that is done on production.
99
00:04:22.050 --> 00:04:26.990
And then lastly, there's just a very small little CSS file
100
00:04:26.990 --> 00:04:30.370
or a CSS configuration file right here.
101
00:04:30.370 --> 00:04:32.330
So let's walk through a few of these.
102
00:04:32.330 --> 00:04:34.490
So just as a starting point,
103
00:04:34.490 --> 00:04:36.430
I'm gonna start with the common file,
104
00:04:36.430 --> 00:04:37.820
and as you can see right here,
105
00:04:37.820 --> 00:04:42.290
what I've done if I've created a set of exports.
106
00:04:42.290 --> 00:04:46.510
So if you're wondering on how the application gets started
107
00:04:46.510 --> 00:04:49.110
and how the entire system knows
108
00:04:49.110 --> 00:04:51.720
and the server knows where to go
109
00:04:51.720 --> 00:04:53.330
to find the bootstrap file
110
00:04:53.330 --> 00:04:56.350
and where that all happens, it's right here.
111
00:04:56.350 --> 00:04:58.970
So what I've defined is a set of exports
112
00:04:58.970 --> 00:05:01.730
where I say the entrypoint to the application
113
00:05:01.730 --> 00:05:03.540
is gonna be for the app
114
00:05:03.540 --> 00:05:05.240
is gonna be that bootstrap file.
115
00:05:05.240 --> 00:05:08.580
That is how it knows to go to that file
116
00:05:08.580 --> 00:05:11.660
and then it starts all the processes that we talked about
117
00:05:11.660 --> 00:05:13.380
when we looked at that file.
118
00:05:13.380 --> 00:05:15.050
Then this vendor file,
119
00:05:15.050 --> 00:05:17.260
that's where our babel-polyfill was.
120
00:05:17.260 --> 00:05:20.030
We have to let it know about those files.
121
00:05:20.030 --> 00:05:22.960
So one of the things that you might find
122
00:05:22.960 --> 00:05:25.940
a little bit overwhelming in this example
123
00:05:25.940 --> 00:05:27.770
or when you're looking through this code
124
00:05:27.770 --> 00:05:29.940
is just how much code there is
125
00:05:29.940 --> 00:05:32.550
and you might think I would never know
126
00:05:32.550 --> 00:05:33.900
how to put all this together
127
00:05:33.900 --> 00:05:35.160
and that's perfectly fine.
128
00:05:35.160 --> 00:05:36.590
That's a natural reaction
129
00:05:36.590 --> 00:05:39.030
if you've never used these tools before.
130
00:05:39.030 --> 00:05:41.187
But the longer that you work with it
131
00:05:41.187 --> 00:05:44.158
and the more examples that you find,
132
00:05:44.158 --> 00:05:48.040
you're gonna see that this is actually a really nice way
133
00:05:48.040 --> 00:05:49.810
of setting up your applications
134
00:05:49.810 --> 00:05:52.530
because there's no magic to it.
135
00:05:52.530 --> 00:05:55.130
You have the ability and the control
136
00:05:55.130 --> 00:05:56.460
to do whatever you want.
137
00:05:56.460 --> 00:05:59.010
So say you didn't wanna call that file bootstrap,
138
00:05:59.010 --> 00:06:01.020
say you wanted to call it starter,
139
00:06:01.020 --> 00:06:03.270
you could call it starter.js,
140
00:06:03.270 --> 00:06:05.200
and then here in this entry point,
141
00:06:05.200 --> 00:06:09.920
you could say I want you to go to src/starter.js
142
00:06:09.920 --> 00:06:12.887
and that is how your application would run
143
00:06:12.887 --> 00:06:14.970
and it would run perfectly fine.
144
00:06:14.970 --> 00:06:18.640
There's nothing special about these type of keywords
145
00:06:18.640 --> 00:06:20.420
or these naming conventions.
146
00:06:20.420 --> 00:06:21.810
I personally like to use them
147
00:06:21.810 --> 00:06:23.010
because they work for me
148
00:06:23.010 --> 00:06:25.740
but they are not required.
149
00:06:25.740 --> 00:06:29.040
Next, we're saying that we want to,
150
00:06:29.040 --> 00:06:30.960
in this resolve object,
151
00:06:30.960 --> 00:06:34.500
we want to resolve JavaScript files
152
00:06:34.500 --> 00:06:36.350
and then Sass files.
153
00:06:36.350 --> 00:06:37.810
This gives us the ability
154
00:06:37.810 --> 00:06:41.020
to have those types of file types
155
00:06:41.020 --> 00:06:44.810
in the application and it'll actually process those.
156
00:06:44.810 --> 00:06:49.180
If we try to process other types of application files,
157
00:06:49.180 --> 00:06:52.860
then we would have to add that to the list there.
158
00:06:52.860 --> 00:06:54.530
And then for our modules,
159
00:06:54.530 --> 00:06:57.680
we point to that node_modules directory.
160
00:06:57.680 --> 00:06:59.471
These things are all pretty standard
161
00:06:59.471 --> 00:07:01.680
and I hope you're not getting bored with these
162
00:07:01.680 --> 00:07:04.900
because I really think that by understanding
163
00:07:04.900 --> 00:07:07.050
how this process is working,
164
00:07:07.050 --> 00:07:09.120
you're gonna be able to later on,
165
00:07:09.120 --> 00:07:11.580
as you get to more advanced topics,
166
00:07:11.580 --> 00:07:13.360
you're gonna be able to understand
167
00:07:13.360 --> 00:07:17.770
that underlying foundational set of skills
168
00:07:17.770 --> 00:07:19.870
and you're gonna be able to understand
169
00:07:19.870 --> 00:07:23.020
the more advanced concepts much easier.
170
00:07:23.020 --> 00:07:26.960
Now, next, we have the set of modules and these rules.
171
00:07:26.960 --> 00:07:28.440
This is where we start to get
172
00:07:28.440 --> 00:07:32.140
into a little bit more complicated boilerplate.
173
00:07:32.140 --> 00:07:32.973
You do not have
174
00:07:32.973 --> 00:07:35.830
to understand these things right now whatsoever.
175
00:07:35.830 --> 00:07:38.270
I simply wanna explain what they're doing.
176
00:07:38.270 --> 00:07:40.730
We just are setting up some rules here.
177
00:07:40.730 --> 00:07:44.440
This is how we're able to work with image files
178
00:07:44.440 --> 00:07:48.990
and how we're able to resolve in the node_modules.
179
00:07:48.990 --> 00:07:51.380
Once again, you'll see that babel-loader.
180
00:07:51.380 --> 00:07:53.490
That babel is the same babel,
181
00:07:53.490 --> 00:07:56.410
it's the same core set of libraries
182
00:07:56.410 --> 00:07:59.440
that I talked about when we discussed
183
00:07:59.440 --> 00:08:03.670
how browsers were able to understand our JavaScript code.
184
00:08:03.670 --> 00:08:06.280
Now moving down, we're simply setting up
185
00:08:06.280 --> 00:08:08.510
a few more sets of rules.
186
00:08:08.510 --> 00:08:10.560
These ones are all image related
187
00:08:10.560 --> 00:08:13.100
and how you can work with files.
188
00:08:13.100 --> 00:08:14.860
This last object here,
189
00:08:14.860 --> 00:08:19.020
this allows us to work with movies and video files,
190
00:08:19.020 --> 00:08:21.870
and you can see here that we could work with MP4s
191
00:08:21.870 --> 00:08:25.280
or the webm format.
192
00:08:25.280 --> 00:08:29.340
And then lastly, we just are having some plugins here
193
00:08:29.340 --> 00:08:31.110
where we're splitting these up.
194
00:08:31.110 --> 00:08:33.280
You don't have to worry about this code right now.
195
00:08:33.280 --> 00:08:34.920
I simply want you to know
196
00:08:34.920 --> 00:08:38.490
that it's there and what it's doing.
197
00:08:38.490 --> 00:08:41.108
Now, let's open up the dev file
198
00:08:41.108 --> 00:08:44.790
and if you go all the way up to the very top,
199
00:08:44.790 --> 00:08:47.731
you'll see that we have quite a few imports here.
200
00:08:47.731 --> 00:08:51.780
These types of imports are bringing functionality
201
00:08:51.780 --> 00:08:53.800
that's specific to webpack
202
00:08:53.800 --> 00:08:56.110
and it also gives us the ability
203
00:08:56.110 --> 00:08:59.870
to do things like work with HTML and JSX
204
00:08:59.870 --> 00:09:03.860
and all of the things that might kinda seem like magic
205
00:09:03.860 --> 00:09:05.610
when we got started,
206
00:09:05.610 --> 00:09:07.760
where you're building out this application
207
00:09:07.760 --> 00:09:08.770
and you make a change
208
00:09:08.770 --> 00:09:11.270
and the entire page reloads and updates
209
00:09:11.270 --> 00:09:12.720
and has that change.
210
00:09:12.720 --> 00:09:15.070
All of those things are working
211
00:09:15.070 --> 00:09:19.010
because of these types of configuration files.
212
00:09:19.010 --> 00:09:22.130
So that's really the main takeaway I want you
213
00:09:22.130 --> 00:09:23.110
to have with this.
214
00:09:23.110 --> 00:09:25.100
So we're not even gonna go a ton
215
00:09:25.100 --> 00:09:27.780
into what's happening in each one of these
216
00:09:27.780 --> 00:09:29.601
because a lot of this is boilerplate
217
00:09:29.601 --> 00:09:31.900
and so it's setting up things
218
00:09:31.900 --> 00:09:35.130
like how the path is gonna get resolved.
219
00:09:35.130 --> 00:09:37.530
How you're able to build the application.
220
00:09:37.530 --> 00:09:39.140
How it's able to run.
221
00:09:39.140 --> 00:09:42.400
Now, one thing I do want you to keep in mind,
222
00:09:42.400 --> 00:09:44.790
if you come all the way down here,
223
00:09:44.790 --> 00:09:49.553
is we have in this dev server here on line 74,
224
00:09:50.570 --> 00:09:51.960
this is kind of helpful
225
00:09:51.960 --> 00:09:55.050
and this is something that you may at some point need
226
00:09:55.050 --> 00:09:55.940
to work with.
227
00:09:55.940 --> 00:09:58.070
So say that, if you notice,
228
00:09:58.070 --> 00:10:00.310
when we started up that web server,
229
00:10:00.310 --> 00:10:03.510
we went to localhost 3000.
230
00:10:03.510 --> 00:10:06.060
Well, right here, what we're doing is
231
00:10:06.060 --> 00:10:07.410
you actually have the ability
232
00:10:07.410 --> 00:10:10.610
to override any of those rules.
233
00:10:10.610 --> 00:10:13.630
So here, we're defining the host
234
00:10:13.630 --> 00:10:15.900
that is localhost right here.
235
00:10:15.900 --> 00:10:18.020
Then we're defining the port,
236
00:10:18.020 --> 00:10:21.310
and if you're curious on what this code here is saying,
237
00:10:21.310 --> 00:10:24.180
it's saying that if we, for some reason,
238
00:10:24.180 --> 00:10:28.600
set our environment, so if there's some other type
239
00:10:28.600 --> 00:10:30.880
of script that's setting the environment,
240
00:10:30.880 --> 00:10:33.460
we're going to check for those items first.
241
00:10:33.460 --> 00:10:35.550
But if that doesn't exist,
242
00:10:35.550 --> 00:10:37.740
then we're gonna use localhost by default
243
00:10:37.740 --> 00:10:40.530
and we're gonna use port 3000 by default.
244
00:10:40.530 --> 00:10:43.300
That's all that we're doing.
245
00:10:43.300 --> 00:10:46.460
So those are the first kinds of things.
246
00:10:46.460 --> 00:10:49.920
Another set of things is watch options.
247
00:10:49.920 --> 00:10:51.600
This is really helpful here.
248
00:10:51.600 --> 00:10:53.750
So what watch options does
249
00:10:53.750 --> 00:10:57.810
is it's talking about watching for file changes.
250
00:10:57.810 --> 00:10:59.910
So the hot reloading,
251
00:10:59.910 --> 00:11:03.720
when we typed in a change into the app component
252
00:11:03.720 --> 00:11:06.570
and hit Save and the entire page reloaded,
253
00:11:06.570 --> 00:11:09.160
that was because it is being watched,
254
00:11:09.160 --> 00:11:10.950
those files are being watched.
255
00:11:10.950 --> 00:11:13.850
Now, we don't want, for performance reasons,
256
00:11:13.850 --> 00:11:16.990
we don't want all of those Node module files
257
00:11:16.990 --> 00:11:19.500
to be watched because no changes
258
00:11:19.500 --> 00:11:20.710
are gonna be made to those.
259
00:11:20.710 --> 00:11:22.500
Those are simply imported
260
00:11:22.500 --> 00:11:23.700
so that we can use them.
261
00:11:23.700 --> 00:11:28.060
So here we're saying that we wanna ignore the node_modules.
262
00:11:28.060 --> 00:11:31.610
So hopefully that kind of clears up how that works.
263
00:11:31.610 --> 00:11:33.990
And then lastly, the last thing I wanna show you
264
00:11:33.990 --> 00:11:35.150
is this proxy
265
00:11:35.150 --> 00:11:37.810
because if you notice, at the very top,
266
00:11:37.810 --> 00:11:38.890
you may have been curious
267
00:11:38.890 --> 00:11:42.220
on why we skipped the proxy directory,
268
00:11:42.220 --> 00:11:44.170
we went straight into the src directory.
269
00:11:44.170 --> 00:11:47.490
And that's because looking at the rules file
270
00:11:47.490 --> 00:11:49.190
would not really make any sense
271
00:11:49.190 --> 00:11:51.900
until we got into webpack.
272
00:11:51.900 --> 00:11:54.730
So let's open up that rules file really quick
273
00:11:54.730 --> 00:11:57.020
and you'll see what is here.
274
00:11:57.020 --> 00:11:59.360
So there's not a lot here
275
00:11:59.360 --> 00:12:02.410
that you need to be aware of or to work with.
276
00:12:02.410 --> 00:12:05.280
This is all set up and it works perfectly
277
00:12:05.280 --> 00:12:07.820
and it's just a set of boilerplate rules.
278
00:12:07.820 --> 00:12:11.410
It's doing things like how you're working with Node
279
00:12:11.410 --> 00:12:15.190
and the version of Node and some different things like
280
00:12:15.190 --> 00:12:17.520
so you're not gonna have to make any changes here.
281
00:12:17.520 --> 00:12:21.630
It's also talking about the npm registry that we're working
282
00:12:21.630 --> 00:12:23.180
so when we type npm,
283
00:12:23.180 --> 00:12:25.190
it knows where to go
284
00:12:25.190 --> 00:12:27.470
and to get the correct set of libraries
285
00:12:27.470 --> 00:12:28.930
and those kinds of things.
286
00:12:28.930 --> 00:12:31.270
And then it's doing a little bit of,
287
00:12:31.270 --> 00:12:32.980
it's working with the path
288
00:12:32.980 --> 00:12:34.330
and it's working with that
289
00:12:34.330 --> 00:12:37.530
but nothing that you have to change here whatsoever.
290
00:12:37.530 --> 00:12:39.400
It's simply I wanted to show that
291
00:12:39.400 --> 00:12:42.180
if you're curious on what that proxy did.
292
00:12:42.180 --> 00:12:43.860
It's simply a set of rules
293
00:12:43.860 --> 00:12:45.870
that webpack is pulling in
294
00:12:45.870 --> 00:12:50.300
and it is allowing our application to run properly.
295
00:12:50.300 --> 00:12:52.750
So let's open up next,
296
00:12:52.750 --> 00:12:55.260
we're gonna skip the postcss file for right now
297
00:12:55.260 --> 00:12:57.120
and I'm just gonna show you the production one
298
00:12:57.120 --> 00:12:59.470
just so you can kinda see the differences.
299
00:12:59.470 --> 00:13:02.570
So you can see the difference between the dev file
300
00:13:02.570 --> 00:13:03.730
and some of its rules
301
00:13:03.730 --> 00:13:07.520
and then what we have here on production.
302
00:13:07.520 --> 00:13:10.560
For the most part, it's gonna be relatively similar.
303
00:13:10.560 --> 00:13:12.570
Some of the key things here
304
00:13:12.570 --> 00:13:13.780
that are different though
305
00:13:13.780 --> 00:13:17.280
are in production, we wanna make sure
306
00:13:17.280 --> 00:13:20.720
that our application is running as fast
307
00:13:20.720 --> 00:13:23.260
and as performant as possible.
308
00:13:23.260 --> 00:13:27.050
So our production rules are going to reflect that.
309
00:13:27.050 --> 00:13:29.080
When we're in development mode,
310
00:13:29.080 --> 00:13:30.360
we don't really care
311
00:13:30.360 --> 00:13:32.570
about how fast the application is running.
312
00:13:32.570 --> 00:13:34.670
We care more about making sure
313
00:13:34.670 --> 00:13:37.040
we're building the application properly.
314
00:13:37.040 --> 00:13:39.920
So some of the minification rules here
315
00:13:39.920 --> 00:13:41.700
are gonna be different.
316
00:13:41.700 --> 00:13:42.700
That's gonna be actually one
317
00:13:42.700 --> 00:13:45.320
of the key elements that's gonna be different.
318
00:13:45.320 --> 00:13:48.310
Minification is a process
319
00:13:48.310 --> 00:13:50.820
that helps our applications,
320
00:13:50.820 --> 00:13:54.580
JavaScript, Sass, CSS, those types of files,
321
00:13:54.580 --> 00:13:57.770
it helps them load much faster
322
00:13:57.770 --> 00:14:00.560
by simply scrunching them up,
323
00:14:00.560 --> 00:14:02.160
for lack of a better term.
324
00:14:02.160 --> 00:14:05.300
So when we're looking at our JavaScript code
325
00:14:05.300 --> 00:14:07.380
in development mode,
326
00:14:07.380 --> 00:14:10.560
we wanna see what the HTML code looks like,
327
00:14:10.560 --> 00:14:12.360
what the CSS code looks like
328
00:14:12.360 --> 00:14:15.140
and we wanna see it spaced out nicely
329
00:14:15.140 --> 00:14:17.670
and so it's readable.
330
00:14:17.670 --> 00:14:19.740
On production, we don't care about that.
331
00:14:19.740 --> 00:14:22.470
We would rather it load a little bit faster.
332
00:14:22.470 --> 00:14:24.362
So with the minification process,
333
00:14:24.362 --> 00:14:29.362
what happens there is webpack goes into our Sass files,
334
00:14:30.430 --> 00:14:31.680
into our JavaScript files,
335
00:14:31.680 --> 00:14:33.710
into everything that we have
336
00:14:33.710 --> 00:14:36.545
and it actually removes all the white space.
337
00:14:36.545 --> 00:14:41.545
So if you saw a minified CSS file,
338
00:14:41.780 --> 00:14:43.720
it might just be on one line.
339
00:14:43.720 --> 00:14:45.320
It takes out all the white space,
340
00:14:45.320 --> 00:14:47.330
it takes all the line endings out
341
00:14:47.330 --> 00:14:49.050
and it puts it all together,
342
00:14:49.050 --> 00:14:51.380
makes it incredibly hard to read
343
00:14:51.380 --> 00:14:53.330
but the browser doesn't care.
344
00:14:53.330 --> 00:14:55.710
And when you perform minification,
345
00:14:55.710 --> 00:14:58.630
what happens is it shrinks the file size
346
00:14:58.630 --> 00:15:01.450
so the files load faster,
347
00:15:01.450 --> 00:15:02.670
and at the end of the day,
348
00:15:02.670 --> 00:15:05.300
the browser skips over the white space anyway
349
00:15:05.300 --> 00:15:06.980
so you don't even want that.
350
00:15:06.980 --> 00:15:09.340
So that's the main key difference
351
00:15:09.340 --> 00:15:11.850
between production and development.
352
00:15:11.850 --> 00:15:13.590
One of the other things
353
00:15:13.590 --> 00:15:15.210
that's gonna be a little bit different,
354
00:15:15.210 --> 00:15:19.140
and we're not going to need that in this guide,
355
00:15:19.140 --> 00:15:21.310
or in this entire course
356
00:15:21.310 --> 00:15:23.850
but just so you know for future usage
357
00:15:23.850 --> 00:15:25.890
is in development mode,
358
00:15:25.890 --> 00:15:30.270
you might have a certain set of environment variables.
359
00:15:30.270 --> 00:15:31.780
So these are things like say
360
00:15:31.780 --> 00:15:34.380
that you're building a full stack application,
361
00:15:34.380 --> 00:15:38.370
you have an API server running on your local machine
362
00:15:38.370 --> 00:15:41.710
and it's running on say port 8080.
363
00:15:41.710 --> 00:15:45.410
And you need to communicate with that local server.
364
00:15:45.410 --> 00:15:48.350
So you have two servers running on your local machine.
365
00:15:48.350 --> 00:15:51.840
You would define that and you would say
366
00:15:51.840 --> 00:15:54.660
that I have a API path
367
00:15:54.660 --> 00:15:59.660
that is going to localhost 8080 here on development.
368
00:16:00.600 --> 00:16:04.830
Now, you wouldn't want to use that same exact port
369
00:16:04.830 --> 00:16:06.800
on production because it would break
370
00:16:06.800 --> 00:16:09.820
because it doesn't have access to your local machine.
371
00:16:09.820 --> 00:16:14.260
So on production, you would say that I want now,
372
00:16:14.260 --> 00:16:16.360
instead of localhost 8080,
373
00:16:16.360 --> 00:16:20.634
I wanna point to the live API.
374
00:16:20.634 --> 00:16:23.750
API dot whatever the site is dot com
375
00:16:23.750 --> 00:16:26.600
and that's a set of rules
376
00:16:26.600 --> 00:16:28.040
that you could set up here.
377
00:16:28.040 --> 00:16:31.400
So hopefully that kind of helps you understand
378
00:16:31.400 --> 00:16:33.470
what all of this code is for.
379
00:16:33.470 --> 00:16:35.420
It's for configuration.
380
00:16:35.420 --> 00:16:38.630
It's so that our applications can run properly
381
00:16:38.630 --> 00:16:41.900
and performantly both on production
382
00:16:41.900 --> 00:16:43.660
and on development
383
00:16:43.660 --> 00:16:46.980
and webpack can be very tricky in the beginning
384
00:16:46.980 --> 00:16:49.210
because it's so explicit.
385
00:16:49.210 --> 00:16:52.220
You configure everything.
386
00:16:52.220 --> 00:16:54.600
Now, because I built these templates,
387
00:16:54.600 --> 00:16:56.770
you don't have to do that in the beginning.
388
00:16:56.770 --> 00:17:01.190
And in fact, and we have had students for several years
389
00:17:01.190 --> 00:17:03.640
that use these templates even when they go
390
00:17:03.640 --> 00:17:05.260
into their normal jobs.
391
00:17:05.260 --> 00:17:09.060
So you can use the React router starter template
392
00:17:09.060 --> 00:17:11.790
and go build an application for your normal job
393
00:17:11.790 --> 00:17:13.920
and you don't even really have to mess
394
00:17:13.920 --> 00:17:15.160
with these files a ton
395
00:17:15.160 --> 00:17:18.320
but I did wanna show you exactly what they're there for.
396
00:17:18.320 --> 00:17:21.225
And then lastly, I'll show you this very tiny file
397
00:17:21.225 --> 00:17:24.690
that is the plugins autoprefixer.
398
00:17:24.690 --> 00:17:28.950
It's just another configuration file for Sass.
399
00:17:28.950 --> 00:17:30.430
Now, I'm gonna close out of these
400
00:17:30.430 --> 00:17:34.350
because I know that even though we walked through that
401
00:17:34.350 --> 00:17:38.860
and we saw at a high level what webpack does,
402
00:17:38.860 --> 00:17:41.600
it really is gonna sink in more
403
00:17:41.600 --> 00:17:44.010
when you start to kinda get your hands dirty
404
00:17:44.010 --> 00:17:44.940
and work with it.
405
00:17:44.940 --> 00:17:46.530
And you don't wanna go make changes
406
00:17:46.530 --> 00:17:48.000
to those configuration files
407
00:17:48.000 --> 00:17:49.470
'cause they might break something
408
00:17:49.470 --> 00:17:51.180
in the application we're gonna build
409
00:17:51.180 --> 00:17:54.620
and so that's not the best learning environment
410
00:17:54.620 --> 00:17:56.690
for getting started with webpack.
411
00:17:56.690 --> 00:17:58.370
So what I want you to do now,
412
00:17:58.370 --> 00:18:00.680
and this is the first time in this course I've asked you
413
00:18:00.680 --> 00:18:04.660
to to this, is after this video's over,
414
00:18:04.660 --> 00:18:07.240
I actually want you to not continue on
415
00:18:07.240 --> 00:18:08.430
to the next guide
416
00:18:08.430 --> 00:18:13.430
and instead, I want you to go to webpack.js.org
417
00:18:13.560 --> 00:18:17.750
and you're gonna see the full webpack address here,
418
00:18:17.750 --> 00:18:21.150
and you're gonna have access to all the documentation.
419
00:18:21.150 --> 00:18:23.610
And I want you to just kind read through the home page
420
00:18:23.610 --> 00:18:24.670
and get started.
421
00:18:24.670 --> 00:18:27.200
See at a high level what they do
422
00:18:27.200 --> 00:18:29.520
and then what I want you to do
423
00:18:29.520 --> 00:18:34.160
is to go down into the Get Started guide.
424
00:18:34.160 --> 00:18:38.270
And because websites changes constantly,
425
00:18:38.270 --> 00:18:41.590
I'll actually put the link in the show notes directly
426
00:18:41.590 --> 00:18:44.660
to get started in case the site looks a little bit different
427
00:18:44.660 --> 00:18:46.330
by the time you're looking at this.
428
00:18:46.330 --> 00:18:47.880
Now, the Get Started guide
429
00:18:47.880 --> 00:18:50.260
is pretty comprehensive.
430
00:18:50.260 --> 00:18:53.840
So it's not just a few tiny examples.
431
00:18:53.840 --> 00:18:56.780
You, on this one page, just in Get Started,
432
00:18:56.780 --> 00:19:00.230
don't worry about going into anything else besides this,
433
00:19:00.230 --> 00:19:03.720
I just want you to focus on this one page,
434
00:19:03.720 --> 00:19:07.560
you will actually build an entire application
435
00:19:07.560 --> 00:19:11.640
from scratch using webpack by following this guide.
436
00:19:11.640 --> 00:19:13.270
And so that's what I want you to do.
437
00:19:13.270 --> 00:19:14.500
I want you to follow,
438
00:19:14.500 --> 00:19:16.530
they give you all of the commands,
439
00:19:16.530 --> 00:19:18.813
and I want you to follow along
440
00:19:18.813 --> 00:19:22.160
and see exactly what happens
441
00:19:22.160 --> 00:19:24.060
because as you're doing this,
442
00:19:24.060 --> 00:19:28.330
as you're building out this little mini application,
443
00:19:28.330 --> 00:19:30.920
what you're gonna do is the elements
444
00:19:30.920 --> 00:19:34.540
of those configuration files that we talked about,
445
00:19:34.540 --> 00:19:37.420
those are gonna start to make a little bit more sense
446
00:19:37.420 --> 00:19:39.010
when you've built out
447
00:19:39.010 --> 00:19:42.360
your own webpack-based system completely
448
00:19:42.360 --> 00:19:43.760
from scratch yourself.
449
00:19:43.760 --> 00:19:48.760
So whenever you're at a very early part
450
00:19:49.800 --> 00:19:52.000
in your development journey,
451
00:19:52.000 --> 00:19:54.540
when you have to look at advanced code,
452
00:19:54.540 --> 00:19:55.900
it can be a little frustrating.
453
00:19:55.900 --> 00:19:57.590
It can be confusing, it can feel
454
00:19:57.590 --> 00:20:00.467
like you're never gonna understand those concepts.
455
00:20:00.467 --> 00:20:04.590
The way to get from beginner to mastery
456
00:20:04.590 --> 00:20:07.520
is by taking very small steps,
457
00:20:07.520 --> 00:20:09.730
and this is one of those steps.
458
00:20:09.730 --> 00:20:12.522
So if the webpack content
459
00:20:12.522 --> 00:20:15.000
and the code looked really confusing,
460
00:20:15.000 --> 00:20:18.990
this is gonna start to help you make sense of it
461
00:20:18.990 --> 00:20:20.670
and so I want you to follow along.
462
00:20:20.670 --> 00:20:23.530
I want you definitely to read not just the instructions
463
00:20:23.530 --> 00:20:25.670
but also read their explanations
464
00:20:25.670 --> 00:20:28.220
'cause that's gonna help you understand everything
465
00:20:28.220 --> 00:20:29.220
that's going on.
466
00:20:29.220 --> 00:20:33.540
This is also going to help you understand some other parts
467
00:20:33.540 --> 00:20:36.330
of the application that we're going to build
468
00:20:36.330 --> 00:20:38.050
because it's gonna get into
469
00:20:38.050 --> 00:20:40.090
how to work more with Node modules
470
00:20:40.090 --> 00:20:42.100
and the package JSON file
471
00:20:42.100 --> 00:20:44.740
and different elements of the application like that.
472
00:20:44.740 --> 00:20:49.740
So I want you to go through the full application build,
473
00:20:49.810 --> 00:20:51.570
all the way to the very bottom
474
00:20:51.570 --> 00:20:53.190
of the page and build that out,
475
00:20:53.190 --> 00:20:55.310
and so hopefully everything is going
476
00:20:55.310 --> 00:20:59.290
to start making a little bit more sense by the end of it.
477
00:20:59.290 --> 00:21:01.370
Make sure to spend plenty of time.
478
00:21:01.370 --> 00:21:04.640
If you have any questions, talking on the support app
479
00:21:04.640 --> 00:21:06.090
or asking them on the support app,
480
00:21:06.090 --> 00:21:07.600
talking with your mentor
481
00:21:07.600 --> 00:21:10.150
or instructor and just so you can start
482
00:21:10.150 --> 00:21:13.100
to get some clarification on what webpack is
483
00:21:13.100 --> 00:21:15.980
and how you can use it to build your applications.
484
00:21:15.980 --> 00:21:18.620
And after you've finished all that,
485
00:21:18.620 --> 00:21:21.685
come back and we're gonna continue moving down
486
00:21:21.685 --> 00:21:24.410
and we've finished all of the directories
487
00:21:24.410 --> 00:21:25.850
and so over the next few guides,
488
00:21:25.850 --> 00:21:27.070
we're just gonna finish walking
489
00:21:27.070 --> 00:21:28.850
through these last set of files
490
00:21:28.850 --> 00:21:31.060
and then we're gonna get into the fun stuff.
491
00:21:31.060 --> 00:21:34.080
We're actually gonna be writing a lot of React code
492
00:21:34.080 --> 00:21:35.190
and we're gonna build out
493
00:21:35.190 --> 00:21:38.253
a really cool-looking portfolio application.