1
00:00:00,360 --> 00:00:03,500
In this lecture, we are going to configure Webpack.

2
00:00:03,840 --> 00:00:06,900
This process is going to involve a couple of steps.

3
00:00:07,170 --> 00:00:11,730
First, let's take a moment to understand what we're trying to accomplish.

4
00:00:12,000 --> 00:00:16,830
We need Webpack to process HTML JavaScript and rust.

5
00:00:17,190 --> 00:00:20,520
Compiling rust with web pack will be another lecture.

6
00:00:20,820 --> 00:00:24,660
We're going to focus solely on H.G, HTML and JavaScript.

7
00:00:25,350 --> 00:00:28,050
The stages of bundling code look like this.

8
00:00:28,320 --> 00:00:30,560
First, we have our project code.

9
00:00:30,960 --> 00:00:33,840
Our code is given to web pack for processing.

10
00:00:34,170 --> 00:00:37,650
After a few moments, Web Pack will spit out a bundle.

11
00:00:38,040 --> 00:00:44,700
Web Pack needs some information about our project before it can begin the process of bundling our code.

12
00:00:45,360 --> 00:00:47,550
First, it needs the entry point.

13
00:00:47,910 --> 00:00:51,780
The entry point can be considered the root JavaScript file.

14
00:00:52,200 --> 00:00:55,620
The root file is responsible for importing files.

15
00:00:55,860 --> 00:00:58,770
Second, it needs the output for the bundle.

16
00:00:59,070 --> 00:01:04,920
We can tell Web Pack where to upload our project's bundle if we configure these settings.

17
00:01:05,040 --> 00:01:07,230
Web Pack will take care of the rest.

18
00:01:08,330 --> 00:01:15,350
To get started, we need to create a configuration file by default, Web pack will search for a file

19
00:01:15,350 --> 00:01:20,330
called web packed config dot J.S. in the root directory of our project.

20
00:01:20,720 --> 00:01:23,120
Let's take a moment to create this file.

21
00:01:25,730 --> 00:01:31,880
Inside this file, we're going to export an object through the module exports property.

22
00:01:34,500 --> 00:01:40,680
The object we're exporting will contain the configuration settings for a Web pack, as mentioned before,

23
00:01:40,830 --> 00:01:46,410
we should tell Web Pack where to find our files in the resource section of this lecture.

24
00:01:46,620 --> 00:01:51,000
I provide a zip file with some starter files before continuing.

25
00:01:51,090 --> 00:01:51,930
Download it.

26
00:01:52,260 --> 00:01:54,180
In a moment, we're going to need it.

27
00:01:54,780 --> 00:01:59,640
Typically, JavaScript applications are written in a directory called source.

28
00:02:00,000 --> 00:02:02,790
However, Rust has claimed this directory.

29
00:02:03,090 --> 00:02:06,540
We should keep our rust and JavaScript code bases separate.

30
00:02:06,840 --> 00:02:13,830
Luckily, we're not going to heavily write JavaScript inside our project, create a folder called public.

31
00:02:16,390 --> 00:02:20,650
The public folder will house our HTML and JavaScript files.

32
00:02:20,920 --> 00:02:24,790
Let's drag and drop the files from the zip file to this directory.

33
00:02:25,120 --> 00:02:26,860
I'm going to quickly do that.

34
00:02:29,420 --> 00:02:31,790
I am providing a total of two files.

35
00:02:31,940 --> 00:02:33,020
Let's explore them.

36
00:02:33,320 --> 00:02:36,710
The first file is the index, not a simple file.

37
00:02:39,210 --> 00:02:41,310
There's not much to say about this file.

38
00:02:41,580 --> 00:02:42,720
There's a lot of code.

39
00:02:42,930 --> 00:02:45,600
But you can mostly ignore it at the top.

40
00:02:45,810 --> 00:02:48,600
I'm importing tailwind and a font from Google.

41
00:02:48,990 --> 00:02:51,870
Both files are served from external sources.

42
00:02:52,200 --> 00:02:54,270
They're going to make our app look cool.

43
00:02:54,660 --> 00:02:59,370
The most important tags in this file can be found near the bottom of the document.

44
00:03:01,970 --> 00:03:09,290
I have added emailed comments above the elements there, the input and image tags in a future lecture.

45
00:03:09,320 --> 00:03:14,090
We are going to listen to an event on the input element for file uploads.

46
00:03:14,480 --> 00:03:18,440
The image tag will be updated when the file has been processed.

47
00:03:18,770 --> 00:03:22,220
I've taken the time to assign IDs to both elements.

48
00:03:22,550 --> 00:03:25,280
We will select them from the JavaScript file.

49
00:03:25,670 --> 00:03:31,190
Speaking of JavaScript, let's open the main a.j.'s file in the public folder.

50
00:03:33,860 --> 00:03:36,290
There isn't a lot happening in this file.

51
00:03:36,500 --> 00:03:39,260
We're keeping it simple by logging a message.

52
00:03:39,590 --> 00:03:42,500
As you can see, we're developing a small app.

53
00:03:42,890 --> 00:03:50,300
Let's begin loading these files switched back to the web pack configuration file inside the object.

54
00:03:50,420 --> 00:03:53,060
We're going to add a property called entry.

55
00:03:55,620 --> 00:04:03,120
The entry option allows us to specify a path to a file in our case, we want to point to the GPS file,

56
00:04:03,420 --> 00:04:06,720
set this option to the following public slash.

57
00:04:06,900 --> 00:04:07,380
Yes.

58
00:04:09,970 --> 00:04:11,680
We're using a relative path.

59
00:04:11,980 --> 00:04:15,310
Make sure to add the dot forward slash characters.

60
00:04:15,610 --> 00:04:18,670
Next, we can begin specifying the output.

61
00:04:19,029 --> 00:04:23,110
The output is where we can tell web pack where to store the bundle.

62
00:04:23,560 --> 00:04:28,060
Add a new property called output with an initial value of an object.

63
00:04:30,600 --> 00:04:37,350
The configuration for the output is going to be more complex than configuring the entry web pack with

64
00:04:37,350 --> 00:04:44,220
like two pieces of information, which are the name of the directory and file, we can set the directory

65
00:04:44,220 --> 00:04:46,230
by adding the path property.

66
00:04:48,900 --> 00:04:52,530
The value for this property must be a full system path.

67
00:04:52,830 --> 00:04:54,900
We can't use a relative path.

68
00:04:55,230 --> 00:05:03,210
No, Jess has a package for generating for system paths at the top of the file import the path package

69
00:05:03,210 --> 00:05:04,740
with the required function.

70
00:05:07,390 --> 00:05:12,430
Next, we're going to set the path property to the path dot resolve function.

71
00:05:14,950 --> 00:05:18,490
This function accepts a list of paths to a pen together.

72
00:05:18,790 --> 00:05:25,930
We're going to pass in a constant called underscore underscore directory name and a directory called

73
00:05:25,930 --> 00:05:26,830
distribution.

74
00:05:29,460 --> 00:05:32,760
The directory name constant is defined by node.

75
00:05:33,180 --> 00:05:38,910
This constant returns the path of the folder to where the current JavaScript file resides.

76
00:05:39,250 --> 00:05:45,030
Afterward, we're telling web PAC to place our files in a directory called distribution.

77
00:05:45,570 --> 00:05:47,790
It's common practice to use this name.

78
00:05:48,120 --> 00:05:52,110
You're more than free to change the directory name afterward.

79
00:05:52,200 --> 00:05:54,450
Let's add an option called file name.

80
00:05:54,810 --> 00:05:59,310
This option is for configuring the name of the file produced by a web pack.

81
00:05:59,670 --> 00:06:02,220
Feel free to use whatever name you would like.

82
00:06:02,520 --> 00:06:05,640
I'm going to call our file index Donges.

83
00:06:08,260 --> 00:06:09,370
We're almost finished.

84
00:06:09,520 --> 00:06:16,360
We've bundled the JavaScript file, but not the HTML file by default, Web Pack does not provide full

85
00:06:16,360 --> 00:06:18,400
support for HTML files.

86
00:06:18,850 --> 00:06:25,180
Luckily, there's a plugin for helping web pack create a HTML files inside the command line.

87
00:06:25,390 --> 00:06:32,590
Run the following command and p.m. install minus d h html web pack plugin.

88
00:06:35,180 --> 00:06:40,640
The package we've installed is a plug in for processing H.M. files with Web pack.

89
00:06:40,940 --> 00:06:42,140
Let's give it a try.

90
00:06:42,410 --> 00:06:48,940
Back in the configuration file import the Gmail Web Pack plug in with the required function.

91
00:06:51,530 --> 00:06:54,470
A plugin extends the behavior of Web pack.

92
00:06:54,770 --> 00:07:01,700
There are various plugins available, configuring them with web pack tends to be a similar process inside

93
00:07:01,700 --> 00:07:03,290
the configuration object.

94
00:07:03,440 --> 00:07:05,780
We can add an array called plugins.

95
00:07:08,240 --> 00:07:13,370
Next, we can create a new instance of the female web pack, plug an object.

96
00:07:15,840 --> 00:07:19,020
The new instance will configure the plugin with Web pack.

97
00:07:19,260 --> 00:07:20,550
It's very hands off.

98
00:07:20,760 --> 00:07:25,070
However, we should tell the plugin where it can find the HTML file.

99
00:07:25,350 --> 00:07:29,790
By default, this plugin will generate a custom HTML file.

100
00:07:30,090 --> 00:07:35,340
We can override this behavior by passing in an object with a property called templates.

101
00:07:37,910 --> 00:07:45,920
The value for this property must be a relative path to the HTML file past and the following value public

102
00:07:45,920 --> 00:07:48,380
slash indexed HTML.

103
00:07:51,500 --> 00:07:57,530
With that final piece of the puzzle in place where a finished let's start the development server, open

104
00:07:57,530 --> 00:07:59,690
the package doc JSON file.

105
00:08:02,160 --> 00:08:05,640
We're going to outsource the commands to these scripts object.

106
00:08:06,000 --> 00:08:09,660
Replace the current command with a new command called serve.

107
00:08:12,250 --> 00:08:19,870
If this command gets executed, we'll run the following Command Web pack serve mode equals development.

108
00:08:22,470 --> 00:08:29,340
The Webpack command is available through the Web Pack Seelye Package, the service of Command will tell

109
00:08:29,340 --> 00:08:31,950
Web Pack to create a development server.

110
00:08:32,340 --> 00:08:36,330
With this single command, we can avoid writing a custom server.

111
00:08:36,840 --> 00:08:44,340
Lastly, we're setting the mode option to development web pack ships various modes with different optimization

112
00:08:44,340 --> 00:08:44,970
settings.

113
00:08:45,270 --> 00:08:50,460
Web Pack will optimize the bundle for development, which can be helpful for debugging.

114
00:08:50,850 --> 00:08:54,150
Next, let's add another command called built.

115
00:08:56,810 --> 00:09:02,330
The value for this command will be the following Web pack mode equals production.

116
00:09:04,980 --> 00:09:10,320
We're using the Webpack command again, this time we're setting the mode to production.

117
00:09:10,650 --> 00:09:14,400
The bundle will be optimized for deploying to production servers.

118
00:09:14,640 --> 00:09:15,840
Our commands are ready.

119
00:09:16,230 --> 00:09:20,460
Let's give our development server a test inside the command line.

120
00:09:20,520 --> 00:09:24,480
Run the following command and 21:00 run serve.

121
00:09:27,160 --> 00:09:33,670
After a couple of seconds, Web pack will generate a bundle during development mode, Web Pack will

122
00:09:33,670 --> 00:09:37,720
watch our files for changes if we modify our files.

123
00:09:37,870 --> 00:09:39,610
The bundle will get refreshed.

124
00:09:40,000 --> 00:09:43,750
This is the power of web pack inside the command line.

125
00:09:43,870 --> 00:09:46,270
A preview URL will be provided.

126
00:09:46,600 --> 00:09:49,120
Let's open this URL in our browser.

127
00:09:51,730 --> 00:09:53,620
Here's our app in all its glory.

128
00:09:53,950 --> 00:09:57,190
Finally, we're ready to start processing images.

129
00:09:57,550 --> 00:10:01,360
The first step is to start reading files uploaded by the user.

130
00:10:01,660 --> 00:10:04,540
We'll begin this task in the following lecture.