1
00:00:00,390 --> 00:00:06,720
In this lecture, we are going to install Web pack for creating and development server, compiling rust

2
00:00:06,870 --> 00:00:08,460
and bundling our files.

3
00:00:08,730 --> 00:00:10,800
You may be familiar with Web Pack.

4
00:00:11,100 --> 00:00:15,540
It's commonly used by frameworks like React, Angular or Vue.

5
00:00:15,870 --> 00:00:22,410
If not, let's quickly talk about Web Pack in the resource section of this lecture, I provide a link

6
00:00:22,410 --> 00:00:24,510
to the official site for Web Pack.

7
00:00:25,050 --> 00:00:31,650
Web Pack is a tool for optimizing JavaScript projects to developing an application takes hundreds of

8
00:00:31,650 --> 00:00:32,310
files.

9
00:00:32,640 --> 00:00:37,720
Splitting your project into separate files is great for development for production.

10
00:00:37,740 --> 00:00:38,790
It's not ideal.

11
00:00:39,090 --> 00:00:44,910
Downloading a web app should be as fast as possible to guarantee the fastest download time.

12
00:00:45,060 --> 00:00:47,220
The size of our app should be small.

13
00:00:47,880 --> 00:00:53,520
Web Pack can help us by minimizing, concatenating and optimizing our project.

14
00:00:53,850 --> 00:00:57,990
Projects can go from hundreds of files to about a dozen files.

15
00:00:58,290 --> 00:00:59,700
But wait, there's more.

16
00:01:00,060 --> 00:01:03,390
Web Pack can compile other languages like rust.

17
00:01:03,720 --> 00:01:09,060
We're going to be using Web Pack to help us automate the process of compiling our code.

18
00:01:09,720 --> 00:01:14,850
It's going to take a lot of work to get the desired behavior, but it's going to be worth it.

19
00:01:15,240 --> 00:01:21,000
Any time we make changes to our project, web pack will automatically compile our code.

20
00:01:21,450 --> 00:01:22,500
Let's get started.

21
00:01:22,800 --> 00:01:24,810
Open your project in your editor.

22
00:01:27,360 --> 00:01:30,000
The first step is to initialize 21:00.

23
00:01:30,420 --> 00:01:33,810
This course assumes you have some knowledge of JavaScript.

24
00:01:34,140 --> 00:01:37,500
Therefore, I expect you to know what npm is.

25
00:01:37,800 --> 00:01:42,270
We aren't going to cover the basics of node or npm in this course.

26
00:01:42,630 --> 00:01:50,310
Inside the command line, we can initialize npm with the following commands npm init minus y.

27
00:01:52,890 --> 00:01:55,410
This command will create a package file.

28
00:01:55,680 --> 00:01:58,650
We're going to need to keep track of our dependencies.

29
00:01:58,920 --> 00:02:04,000
Next, we can begin installing web pack inside the command line.

30
00:02:04,020 --> 00:02:12,900
Run the following commands and p.m. install minus DX Web Pack Web Pack Seelye Web Pack Dev Server.

31
00:02:15,440 --> 00:02:20,330
We are installing three packages for Web Pack while the installation is running.

32
00:02:20,360 --> 00:02:22,640
Let's talk about these three packages.

33
00:02:25,370 --> 00:02:27,680
Web pack is a modular library.

34
00:02:27,920 --> 00:02:31,610
It's packed with features for handling various types of projects.

35
00:02:31,850 --> 00:02:35,660
While that's great and all, we may not need every single feature.

36
00:02:35,900 --> 00:02:38,360
We are encouraged to download what we need.

37
00:02:39,080 --> 00:02:41,450
The first package is called Web Pack.

38
00:02:41,660 --> 00:02:44,240
It's the core functionality of Web Pack.

39
00:02:44,570 --> 00:02:49,760
In almost all cases, you will need to download this package for bundling files.

40
00:02:50,240 --> 00:02:53,630
Up next, we have the Web Pack Seelye package.

41
00:02:53,960 --> 00:02:59,480
This package is a tool with dozens of commands for controlling web pack through the command line.

42
00:02:59,840 --> 00:03:05,630
It also has other tools for working with plugins, which can be helpful if you want to develop a plugin

43
00:03:05,630 --> 00:03:06,530
for Web Pack.

44
00:03:07,010 --> 00:03:11,840
Lastly, we have the development server WebAssembly does not work with.

45
00:03:11,840 --> 00:03:16,010
The file protocol files must be delivered via a server.

46
00:03:16,370 --> 00:03:19,430
Paying for a server is not ideal for development.

47
00:03:19,700 --> 00:03:23,960
Luckily, this package will prepare a server on our local machines.

48
00:03:24,260 --> 00:03:28,460
We don't need to write server side code to start a development server.

49
00:03:29,090 --> 00:03:32,390
These dependencies will be enough for working with Web Pack.

50
00:03:32,660 --> 00:03:38,960
Once you're finished downloading those dependencies, let's start configuring Web Pack in the next lecture.