1
00:00:00,025 --> 00:00:05,570
[MUSIC]

2
00:00:05,570 --> 00:00:09,319
In the previous course on Bootstrap 4,

3
00:00:09,319 --> 00:00:14,613
we learned how to make use of
either NPM scripts or Grunt or

4
00:00:14,613 --> 00:00:21,220
Gulp to build the distribution Folder for
our web application.

5
00:00:21,220 --> 00:00:27,040
So we saw how the distribution folder
is built by taking all the HTML,

6
00:00:27,040 --> 00:00:30,270
CSS and JavaScript files.

7
00:00:30,270 --> 00:00:35,540
And then doing modification,
uglification, concatenation,

8
00:00:35,540 --> 00:00:40,490
and various other transformations on these
to build distribution files that can be

9
00:00:40,490 --> 00:00:48,470
simply copied over to the server and then
make your website available for users.

10
00:00:48,470 --> 00:00:52,050
Now, what about your Angular application?

11
00:00:52,050 --> 00:00:57,240
How do we package our Angular
application to deploy it on a website?

12
00:00:57,240 --> 00:01:01,670
Now as you realize your angular
application is also ultimately going to be

13
00:01:01,670 --> 00:01:06,630
deployed to a website from where people
will access your Angular application,

14
00:01:06,630 --> 00:01:09,350
download the Angular
application to the browser and

15
00:01:09,350 --> 00:01:13,780
then their angular application will
come to life in their browsers.

16
00:01:14,810 --> 00:01:19,430
We'll, also look at
the angular way of targeting

17
00:01:19,430 --> 00:01:23,890
mobile devices in the next two courses,
in this specialization.

18
00:01:23,890 --> 00:01:27,770
So I am not talking specifically
about that, at this moment.

19
00:01:27,770 --> 00:01:32,180
But here we are talking about how
to target a web browser window.

20
00:01:32,180 --> 00:01:35,150
Using your Angular application code.

21
00:01:35,150 --> 00:01:38,050
So coming to the question of
how do we package our Angular

22
00:01:38,050 --> 00:01:40,090
application for deployment?

23
00:01:40,090 --> 00:01:47,850
Now we could use the grand Gulp and NPM
scripts way of doing it, if you choose to.

24
00:01:47,850 --> 00:01:53,290
But there is a new kid on
the block called as webpack.

25
00:01:53,290 --> 00:01:59,540
Webpack as we would understand
pretty soon is a module bundler.

26
00:01:59,540 --> 00:02:03,040
Now, we will look at some details
in the next couple of slides.

27
00:02:03,040 --> 00:02:08,150
So, what webpack allows you to do is to
package your Angular application in a way

28
00:02:08,150 --> 00:02:11,720
that it is easy to deploy to a website and

29
00:02:11,720 --> 00:02:15,470
make your Angular application
available for users.

30
00:02:15,470 --> 00:02:22,070
Now since we are using Angular CLI for
building our Angular application,

31
00:02:22,070 --> 00:02:26,040
Angular CLI already
leverages of webpack for

32
00:02:26,040 --> 00:02:32,010
doing its building for the distribution
folder for your Angular application.

33
00:02:32,010 --> 00:02:38,780
So we don't need to explicitly do any
additional work to make use of webpack.

34
00:02:38,780 --> 00:02:40,700
Once we are using Angular CLI.

35
00:02:40,700 --> 00:02:45,870
Because the Angular CLI takes care of
all of the heavy lifting on our behalf.

36
00:02:45,870 --> 00:02:50,664
So but before we see what
the Angular CLIs way of building your

37
00:02:50,664 --> 00:02:53,022
distribution further ease.

38
00:02:53,022 --> 00:02:57,162
We need to understand a few
concepts about webpack and

39
00:02:57,162 --> 00:03:00,566
how webpack works in
a little bit of detail so

40
00:03:00,566 --> 00:03:06,270
that when Angular CLI produces the
distribution folder you can look in and

41
00:03:06,270 --> 00:03:10,410
see what exactly is being
built by Angular CLI.

42
00:03:10,410 --> 00:03:14,150
So my aim of this particular

43
00:03:14,150 --> 00:03:18,950
lecture is to just give you
some brief overview of webpack.

44
00:03:18,950 --> 00:03:23,770
This lecture is not an introduction
to how to make use of webpack.

45
00:03:23,770 --> 00:03:26,400
That is beyond the scope of this course,
but

46
00:03:26,400 --> 00:03:30,980
if you are interested the webpacks site

47
00:03:30,980 --> 00:03:36,280
has a lot of information about how webpack
can be used for other applications.

48
00:03:36,280 --> 00:03:39,800
You could, in principle,
use webpack to package your Bootstrap

49
00:03:41,350 --> 00:03:44,680
application that you developed
in the previous course also.

50
00:03:46,080 --> 00:03:50,680
But at this moment we are going to
look at how we make use of webpack

51
00:03:51,840 --> 00:03:57,640
as part of the Angular CLI way of
building our angular interpretation.

52
00:03:59,640 --> 00:04:02,890
So obviously the first question
that arises in your mind is,

53
00:04:02,890 --> 00:04:04,410
what exactly is webpack?

54
00:04:04,410 --> 00:04:06,150
What are we talking about?

55
00:04:06,150 --> 00:04:12,850
Webpack, this is the definition from
webpack's documentation itself.

56
00:04:12,850 --> 00:04:19,130
It says webpack is a module bundler for
modern JavaScript applications.

57
00:04:19,130 --> 00:04:21,723
Your Angular application that
you have been working on so

58
00:04:21,723 --> 00:04:24,530
far is an easy modern
JavaScript application.

59
00:04:24,530 --> 00:04:29,590
Now you're all working with the cutting
edge in Angular technology.

60
00:04:29,590 --> 00:04:35,170
And so, obviously it qualifies as
a modern JavaScript application and

61
00:04:35,170 --> 00:04:38,570
hence, using webpack makes perfect sense.

62
00:04:38,570 --> 00:04:40,980
Now what webpack best is,

63
00:04:40,980 --> 00:04:45,720
it looks at the entire structure
of your Angular application.

64
00:04:45,720 --> 00:04:50,610
So it recursively traverses
through your code of your Angular

65
00:04:50,610 --> 00:04:54,980
application looking to
see how best to bundle

66
00:04:54,980 --> 00:05:00,680
the information into what
is called as bundles.

67
00:05:00,680 --> 00:05:05,947
When webpack looks at your code,
it treats every file that you

68
00:05:05,947 --> 00:05:12,735
have within your Angular application,
be it a JavaScript of Typescript file,

69
00:05:12,735 --> 00:05:17,319
be it a CSS file, be it a SAS file,
be it an image file.

70
00:05:17,319 --> 00:05:21,781
Whatever, it treats every one of them
as modules from its perspective,

71
00:05:21,781 --> 00:05:25,438
and then it decides,
what is the best way of packaging these

72
00:05:25,438 --> 00:05:30,790
modules into what are called as bundles
that can be downloaded from the.

73
00:05:30,790 --> 00:05:36,060
Server to your web browser in
a comfortable and convenient manner.

74
00:05:37,350 --> 00:05:42,820
So when we talk about webpack we obviously
need to clarify what a bundle means.

75
00:05:42,820 --> 00:05:47,315
As I briefly stated in the previous slide,
a bundle is nothing but

76
00:05:47,315 --> 00:05:51,155
a JavaScript file that
incorporates assets.

77
00:05:51,155 --> 00:05:56,130
Now, you have to keep this in mind that
webpack treats everything as JavaScript.

78
00:05:56,130 --> 00:06:02,410
To it whether it is CSS or
any of the other kinds of files,

79
00:06:02,410 --> 00:06:05,930
they will also be treated as JavaScript
from the perspective of webpack.

80
00:06:05,930 --> 00:06:10,790
Now don't get too concerned,
webpack knows how to package them and

81
00:06:10,790 --> 00:06:15,470
treat them as JavaScript bundles
where it prepares those bundles.

82
00:06:15,470 --> 00:06:19,740
Or JavaScript modules where
it prepares those bundles.

83
00:06:19,740 --> 00:06:26,290
So a bundle is something that groups
together modules that belong together.

84
00:06:26,290 --> 00:06:29,010
When I talk about module I'm
not implying Angular module,

85
00:06:29,010 --> 00:06:30,690
I'm not implying JavaScript module.

86
00:06:32,220 --> 00:06:36,170
As I said and Webpack,
every file is created as a module.

87
00:06:36,170 --> 00:06:40,820
And so it bundles those modules together,

88
00:06:40,820 --> 00:06:46,160
that should be served to the client
in a single response to a request.

89
00:06:47,200 --> 00:06:51,740
So webpack itself makes
a decision on saying what

90
00:06:51,740 --> 00:06:55,070
parts should be joined
together into a bundle.

91
00:06:55,070 --> 00:06:59,000
And should be delivered together so
that the rendering of your

92
00:06:59,000 --> 00:07:04,120
web application is done in
the most effective manner.

93
00:07:04,120 --> 00:07:09,190
Now, Angular CLI has already built its
configuration of how best to package

94
00:07:09,190 --> 00:07:17,370
the Angular Assets, such that it is most
conveniently delivered to the browser.

95
00:07:17,370 --> 00:07:21,550
So we don't need to worry about
how to do this ourselves,

96
00:07:21,550 --> 00:07:25,490
we'll leave it to angular CLI logic to
take care of all that configuration of

97
00:07:25,490 --> 00:07:29,540
how that pack builds it's
bundles on our behalf.

98
00:07:29,540 --> 00:07:33,190
So what Webpack does is,
it starts at the top most level.

99
00:07:33,190 --> 00:07:38,450
In your Angular application, the topmost
level is index.html and main.js files,

100
00:07:38,450 --> 00:07:43,930
as we have learned in the very
first lesson of this course.

101
00:07:43,930 --> 00:07:49,170
So it starts there, and
then it follows all the inputs

102
00:07:49,170 --> 00:07:54,630
that you use in those down the path and

103
00:07:54,630 --> 00:08:00,760
brings up a hierarchical organization
of all the different parts.

104
00:08:00,760 --> 00:08:06,110
So what is called a dependency
graph is built by webpack.

105
00:08:06,110 --> 00:08:10,840
Now using this dependency graph,
Webpack then decides how to

106
00:08:10,840 --> 00:08:15,810
package it's bundles and that images
one or more bundles as they make

107
00:08:15,810 --> 00:08:21,630
sense for your particular
application that webpack is bundle.

108
00:08:21,630 --> 00:08:27,690
And in the process of doing it,
when it is handling non-JavaScript files,

109
00:08:27,690 --> 00:08:34,440
like CSS, HTML and
a SAS or Images and so on.

110
00:08:34,440 --> 00:08:38,240
Then it uses plugins that
enable you to pre-process and

111
00:08:38,240 --> 00:08:41,910
modify those files,
those non JavaScript files,

112
00:08:41,910 --> 00:08:46,970
into a way that they can be
bundled into your webpack bundles.

113
00:08:49,082 --> 00:08:52,070
If you're using webpack from the scratch,

114
00:08:52,070 --> 00:08:57,510
then you would describe some of the
configuration for your webpack to work.

115
00:08:57,510 --> 00:09:00,775
On these files in a file named

116
00:09:00,775 --> 00:09:06,810
webpack.config.js which we included in
the root folder of your application.

117
00:09:06,810 --> 00:09:11,640
In our case since we are relying on
Angular CLI to do this on our behalf

118
00:09:11,640 --> 00:09:16,470
Angular CLI automatically clicks here
at building the configuration for

119
00:09:16,470 --> 00:09:18,300
webpack to work with.

120
00:09:18,300 --> 00:09:23,260
Now when we talk about webpack, there
are four concepts that are important for

121
00:09:23,260 --> 00:09:26,660
us to understand on how
webpack works on pics.

122
00:09:26,660 --> 00:09:28,740
The first one is entry.

123
00:09:28,740 --> 00:09:33,560
Entry is the point at which
the webpack should start and

124
00:09:33,560 --> 00:09:36,350
follow down to build the dependency graph.

125
00:09:36,350 --> 00:09:40,260
So, main.ts file for
example, is an entry point.

126
00:09:40,260 --> 00:09:44,490
So webpack can begin it's chase
in building the dependency graph.

127
00:09:44,490 --> 00:09:50,860
Right at main.ts and then go chasing after
all the import statements from there

128
00:09:50,860 --> 00:09:56,160
to their other files and then from
there they imports those files and

129
00:09:56,160 --> 00:10:01,490
so on all the way down until it
builds up the dependency graph.

130
00:10:02,930 --> 00:10:06,660
Now, the second part is what
we would call as the output.

131
00:10:06,660 --> 00:10:11,200
In webpack the output is the set
of bundles that webpack prepares

132
00:10:11,200 --> 00:10:11,740
on your behalf.

133
00:10:12,890 --> 00:10:15,590
The third one is loaders.

134
00:10:15,590 --> 00:10:18,950
Now webpack as I said only
understands JavaScript and

135
00:10:18,950 --> 00:10:21,540
it knows only how to work with JavaScript.

136
00:10:21,540 --> 00:10:26,250
But as I also mentioned,
webpack treats every file as a module.

137
00:10:26,250 --> 00:10:31,660
So those files that are not
JavaScript they have to be

138
00:10:31,660 --> 00:10:36,870
transformed and
then put into your bundles by using

139
00:10:36,870 --> 00:10:42,300
appropriate transformations and then they
will be added into your dependency graph.

140
00:10:42,300 --> 00:10:45,420
This is where the use of
the various plugins come in.

141
00:10:45,420 --> 00:10:47,320
What do plugins help you to do?

142
00:10:47,320 --> 00:10:51,920
The plugins help you to perform the
various actions and custom functionalities

143
00:10:51,920 --> 00:10:58,020
or compilations that you need to do for
building up your bundles.

144
00:10:58,020 --> 00:11:02,820
So it will help you to transform
your CSS into a way that I can

145
00:11:02,820 --> 00:11:06,830
package into your JavaScript bundles,
and so on.

146
00:11:06,830 --> 00:11:12,570
So that is a quick introduction
to how webpack actually works.

147
00:11:12,570 --> 00:11:17,420
Now with that quick introduction,
in the next exercise you will

148
00:11:17,420 --> 00:11:22,750
see that we will conveniently
make use of a command called ng

149
00:11:22,750 --> 00:11:28,360
build to build our distribution folder for
our Angular application.

150
00:11:28,360 --> 00:11:31,690
Ng build allows you to even
build a development version or

151
00:11:33,380 --> 00:11:36,440
production version of
your Angular application.

152
00:11:36,440 --> 00:11:38,790
When we used ng surf,

153
00:11:38,790 --> 00:11:43,270
the Angular CLI was indeed making
use of webpack to pack things.

154
00:11:43,270 --> 00:11:44,350
So if you go back and

155
00:11:44,350 --> 00:11:50,630
look at all the things that were being
printed in your terminal window,

156
00:11:50,630 --> 00:11:55,910
you will begin to see webpack working
behind the scenes to do the bundles.

157
00:11:57,070 --> 00:12:01,760
Now in the next exercise you will
build their distribution folder,

158
00:12:01,760 --> 00:12:08,840
which can then be copied to your website
and then deploy your Angular application.

159
00:12:08,840 --> 00:12:12,020
Now I have already done one build

160
00:12:12,020 --> 00:12:15,570
of the Angular application
that we have built so far.

161
00:12:15,570 --> 00:12:20,380
So that, let's go and take a quick look at
the distribution folder to see what is in

162
00:12:20,380 --> 00:12:24,370
there before you actually do the exercise.

163
00:12:24,370 --> 00:12:28,520
So once you complete the exercise,
I would strongly advise you to go and

164
00:12:28,520 --> 00:12:36,140
look at the disk folder that was built in
your Angular applications project folder.

165
00:12:36,140 --> 00:12:40,940
And then look and see exactly the files
that I'm going to show you right now.

166
00:12:40,940 --> 00:12:44,020
Right in the distribution folder.

167
00:12:44,020 --> 00:12:50,890
Going to our Angular application
in the Visual Studio here,

168
00:12:50,890 --> 00:12:53,950
you see that I am now opening
the distribution folder.

169
00:12:53,950 --> 00:12:58,260
And inside the distribution folder you
will see a whole bunch of files here.

170
00:12:58,260 --> 00:13:03,905
You will see a file named
main a long string where

171
00:13:03,905 --> 00:13:09,890
.bundle.js from your knowledge of Gulp and
Grunt from the previous course,

172
00:13:09,890 --> 00:13:14,620
you'll begin to see what that
intermediate long string means.

173
00:13:14,620 --> 00:13:19,830
That is how you add that
versioning to your application.

174
00:13:19,830 --> 00:13:25,310
Similarly you see another file
called styles.something.css.

175
00:13:25,310 --> 00:13:28,834
Then you see a vendor.bundle.js.

176
00:13:28,834 --> 00:13:31,319
And then polyfills.js.

177
00:13:31,319 --> 00:13:34,300
Then you have an index.html file, and

178
00:13:34,300 --> 00:13:37,350
you're wondering what happened
to all your HTML code?

179
00:13:37,350 --> 00:13:39,970
It's in one of those bundles there, okay.

180
00:13:39,970 --> 00:13:43,610
So all the templates that you've written
is all there in one of those bundles,

181
00:13:43,610 --> 00:13:45,670
except the index.html page.

182
00:13:45,670 --> 00:13:51,206
You need the index.html
page explicitly because,

183
00:13:51,206 --> 00:13:54,348
when a user types in the URL for

184
00:13:54,348 --> 00:13:59,024
your website into the browser address bar.

185
00:13:59,024 --> 00:14:01,624
Then you would land at your website and

186
00:14:01,624 --> 00:14:05,362
the index dot HTML pages where
you start everything and

187
00:14:05,362 --> 00:14:11,400
you need that to bootstrap your Angular
application so that is why that is there.

188
00:14:11,400 --> 00:14:16,170
And then you also see the fontawesome
files there that are necessary and

189
00:14:16,170 --> 00:14:21,340
that inside the asset you see some
images there, in the assets folder.

190
00:14:22,530 --> 00:14:28,980
So taking a quick look at main file,
you'll see that this is

191
00:14:28,980 --> 00:14:35,185
as you can see is a many file
compressed concatenated set of files.

192
00:14:35,185 --> 00:14:40,025
Now, if you try to read that,
it's not going to be easy,

193
00:14:40,025 --> 00:14:42,455
it's a huge file with a lot of things.

194
00:14:42,455 --> 00:14:46,695
This is also includes all
the Angular frameworks code,

195
00:14:46,695 --> 00:14:49,140
a hand your code that you have written.

196
00:14:49,140 --> 00:14:53,980
And the code that comes from
Angular Material, Flex Layout and

197
00:14:53,980 --> 00:14:58,460
every other thing that you included
with your Angular application.

198
00:14:58,460 --> 00:15:02,480
Similarly, you have polyfills and
then styles and

199
00:15:02,480 --> 00:15:07,130
you begin to see that all the things
that you use within your Angular

200
00:15:07,130 --> 00:15:10,870
application have been bundled
together into these files there.

201
00:15:12,270 --> 00:15:17,220
So with this I hope you got
a quick overview of webpack.

202
00:15:17,220 --> 00:15:21,100
Now it is time for us to go to the
exercise, where we will simply make use of

203
00:15:21,100 --> 00:15:26,660
Angular CLI ng build command to
build this distribution folder.

204
00:15:26,660 --> 00:15:30,810
And you will see how you can deploy
your Angular application to a website.

205
00:15:31,870 --> 00:15:37,329
Right after you complete the build.

206
00:15:37,329 --> 00:15:39,969
[MUSIC]