1
00:00:02,160 --> 00:00:09,450
This is the bigger picture of what webpack is and does, let's understand how it works behind the scenes

2
00:00:09,450 --> 00:00:16,470
since it is such a crucial tool handling our whole build workflow. Behind the scenes, webpack has four

3
00:00:16,470 --> 00:00:20,180
important things, four important features,

4
00:00:20,490 --> 00:00:23,250
it always needs at least one entry point,

5
00:00:23,250 --> 00:00:25,040
you can have multiple ones.

6
00:00:25,050 --> 00:00:32,460
This could be our app.js file, our root javascript file which mounts our react application to

7
00:00:32,460 --> 00:00:39,360
the dom, which calls react dom render for example, it needs this file since it then analyzes the dependencies

8
00:00:39,360 --> 00:00:45,870
of this file and the root entry file will have a dependency to another file which then in turn has

9
00:00:45,870 --> 00:00:52,450
more dependencies, so webpack can build up a dependency graph starting with that root entry file

10
00:00:52,670 --> 00:00:56,280
so it can understand which files make up our application

11
00:00:56,320 --> 00:01:03,390
if we give it our entry file. It then analyzes all the dependencies and bundles them together into an

12
00:01:03,450 --> 00:01:03,960
output

13
00:01:03,960 --> 00:01:10,100
we specify it like a bundle.js file in a dist folder, we specify the file name and where it should go.

14
00:01:10,470 --> 00:01:17,100
And there it will put all these dependencies into that file, correctly ordered and in one concatenated

15
00:01:17,220 --> 00:01:19,010
output file.

16
00:01:19,110 --> 00:01:22,840
This is the core functionality but as I said it's more than that,

17
00:01:22,990 --> 00:01:26,780
in-between, there are two other important features we can utilize.

18
00:01:26,940 --> 00:01:34,350
For one there are so-called loaders, loaders are applied on a per file level so we can for example say

19
00:01:34,660 --> 00:01:41,880
all javascript files should get handled by loaderX, all css files should get handled by loaderY,

20
00:01:41,880 --> 00:01:49,740
babel-loader and css-loader are two popular examples which get used in a lot of projects, so

21
00:01:49,740 --> 00:01:56,320
loaders are file dependent or apply file dependent transformations.

22
00:01:56,340 --> 00:02:03,030
We also then have plugins where loaders are applied on a per file basis, plug

23
00:02:03,040 --> 00:02:09,330
instead take the concatenated files, so the bundle but before it's written to the output.

24
00:02:09,360 --> 00:02:15,120
Here we can apply some general transformations or optimizations like uglify,

25
00:02:15,420 --> 00:02:20,950
so this is on a global level and happens after the loaders did their job.

26
00:02:20,970 --> 00:02:24,950
This is how webpack works, what it does behind the scenes

27
00:02:25,110 --> 00:02:31,110
and this is all set up in a webpack configuration file which we will set up together in this

28
00:02:31,110 --> 00:02:32,510
module.

29
00:02:32,760 --> 00:02:37,920
So without further ado let's dive into building our own project setup.