[MUSIC]
In the previous course on Bootstrap 4,
we learned how to make use of either NPM scripts or Grunt or
Gulp to build the distribution Folder for our web application.
So we saw how the distribution folder is built by taking all the HTML,
CSS and JavaScript files.
And then doing modification, uglification, concatenation,
and various other transformations on these to build distribution files that can be
simply copied over to the server and then make your website available for users.
Now, what about your Angular application?
How do we package our Angular application to deploy it on a website?
Now as you realize your angular application is also ultimately going to be
deployed to a website from where people will access your Angular application,
download the Angular application to the browser and
then their angular application will come to life in their browsers.
We'll, also look at the angular way of targeting
mobile devices in the next two courses, in this specialization.
So I am not talking specifically about that, at this moment.
But here we are talking about how to target a web browser window.
Using your Angular application code.
So coming to the question of how do we package our Angular
application for deployment?
Now we could use the grand Gulp and NPM scripts way of doing it, if you choose to.
But there is a new kid on the block called as webpack.
Webpack as we would understand pretty soon is a module bundler.
Now, we will look at some details in the next couple of slides.
So, what webpack allows you to do is to package your Angular application in a way
that it is easy to deploy to a website and
make your Angular application available for users.
Now since we are using Angular CLI for building our Angular application,
Angular CLI already leverages of webpack for
doing its building for the distribution folder for your Angular application.
So we don't need to explicitly do any additional work to make use of webpack.
Once we are using Angular CLI.
Because the Angular CLI takes care of all of the heavy lifting on our behalf.
So but before we see what the Angular CLIs way of building your
distribution further ease.
We need to understand a few concepts about webpack and
how webpack works in a little bit of detail so
that when Angular CLI produces the distribution folder you can look in and
see what exactly is being built by Angular CLI.
So my aim of this particular
lecture is to just give you some brief overview of webpack.
This lecture is not an introduction to how to make use of webpack.
That is beyond the scope of this course, but
if you are interested the webpacks site
has a lot of information about how webpack can be used for other applications.
You could, in principle, use webpack to package your Bootstrap
application that you developed in the previous course also.
But at this moment we are going to look at how we make use of webpack
as part of the Angular CLI way of building our angular interpretation.
So obviously the first question that arises in your mind is,
what exactly is webpack?
What are we talking about?
Webpack, this is the definition from webpack's documentation itself.
It says webpack is a module bundler for modern JavaScript applications.
Your Angular application that you have been working on so
far is an easy modern JavaScript application.
Now you're all working with the cutting edge in Angular technology.
And so, obviously it qualifies as a modern JavaScript application and
hence, using webpack makes perfect sense.
Now what webpack best is,
it looks at the entire structure of your Angular application.
So it recursively traverses through your code of your Angular
application looking to see how best to bundle
the information into what is called as bundles.
When webpack looks at your code, it treats every file that you
have within your Angular application, be it a JavaScript of Typescript file,
be it a CSS file, be it a SAS file, be it an image file.
Whatever, it treats every one of them as modules from its perspective,
and then it decides, what is the best way of packaging these
modules into what are called as bundles that can be downloaded from the.
Server to your web browser in a comfortable and convenient manner.
So when we talk about webpack we obviously need to clarify what a bundle means.
As I briefly stated in the previous slide, a bundle is nothing but
a JavaScript file that incorporates assets.
Now, you have to keep this in mind that webpack treats everything as JavaScript.
To it whether it is CSS or any of the other kinds of files,
they will also be treated as JavaScript from the perspective of webpack.
Now don't get too concerned, webpack knows how to package them and
treat them as JavaScript bundles where it prepares those bundles.
Or JavaScript modules where it prepares those bundles.
So a bundle is something that groups together modules that belong together.
When I talk about module I'm not implying Angular module,
I'm not implying JavaScript module.
As I said and Webpack, every file is created as a module.
And so it bundles those modules together,
that should be served to the client in a single response to a request.
So webpack itself makes a decision on saying what
parts should be joined together into a bundle.
And should be delivered together so that the rendering of your
web application is done in the most effective manner.
Now, Angular CLI has already built its configuration of how best to package
the Angular Assets, such that it is most conveniently delivered to the browser.
So we don't need to worry about how to do this ourselves,
we'll leave it to angular CLI logic to take care of all that configuration of
how that pack builds it's bundles on our behalf.
So what Webpack does is, it starts at the top most level.
In your Angular application, the topmost level is index.html and main.js files,
as we have learned in the very first lesson of this course.
So it starts there, and then it follows all the inputs
that you use in those down the path and
brings up a hierarchical organization of all the different parts.
So what is called a dependency graph is built by webpack.
Now using this dependency graph, Webpack then decides how to
package it's bundles and that images one or more bundles as they make
sense for your particular application that webpack is bundle.
And in the process of doing it, when it is handling non-JavaScript files,
like CSS, HTML and a SAS or Images and so on.
Then it uses plugins that enable you to pre-process and
modify those files, those non JavaScript files,
into a way that they can be bundled into your webpack bundles.
If you're using webpack from the scratch,
then you would describe some of the configuration for your webpack to work.
On these files in a file named
webpack.config.js which we included in the root folder of your application.
In our case since we are relying on Angular CLI to do this on our behalf
Angular CLI automatically clicks here at building the configuration for
webpack to work with.
Now when we talk about webpack, there are four concepts that are important for
us to understand on how webpack works on pics.
The first one is entry.
Entry is the point at which the webpack should start and
follow down to build the dependency graph.
So, main.ts file for example, is an entry point.
So webpack can begin it's chase in building the dependency graph.
Right at main.ts and then go chasing after all the import statements from there
to their other files and then from there they imports those files and
so on all the way down until it builds up the dependency graph.
Now, the second part is what we would call as the output.
In webpack the output is the set of bundles that webpack prepares
on your behalf.
The third one is loaders.
Now webpack as I said only understands JavaScript and
it knows only how to work with JavaScript.
But as I also mentioned, webpack treats every file as a module.
So those files that are not JavaScript they have to be
transformed and then put into your bundles by using
appropriate transformations and then they will be added into your dependency graph.
This is where the use of the various plugins come in.
What do plugins help you to do?
The plugins help you to perform the various actions and custom functionalities
or compilations that you need to do for building up your bundles.
So it will help you to transform your CSS into a way that I can
package into your JavaScript bundles, and so on.
So that is a quick introduction to how webpack actually works.
Now with that quick introduction, in the next exercise you will
see that we will conveniently make use of a command called ng
build to build our distribution folder for our Angular application.
Ng build allows you to even build a development version or
production version of your Angular application.
When we used ng surf,
the Angular CLI was indeed making use of webpack to pack things.
So if you go back and
look at all the things that were being printed in your terminal window,
you will begin to see webpack working behind the scenes to do the bundles.
Now in the next exercise you will build their distribution folder,
which can then be copied to your website and then deploy your Angular application.
Now I have already done one build
of the Angular application that we have built so far.
So that, let's go and take a quick look at the distribution folder to see what is in
there before you actually do the exercise.
So once you complete the exercise, I would strongly advise you to go and
look at the disk folder that was built in your Angular applications project folder.
And then look and see exactly the files that I'm going to show you right now.
Right in the distribution folder.
Going to our Angular application in the Visual Studio here,
you see that I am now opening the distribution folder.
And inside the distribution folder you will see a whole bunch of files here.
You will see a file named main a long string where
.bundle.js from your knowledge of Gulp and Grunt from the previous course,
you'll begin to see what that intermediate long string means.
That is how you add that versioning to your application.
Similarly you see another file called styles.something.css.
Then you see a vendor.bundle.js.
And then polyfills.js.
Then you have an index.html file, and
you're wondering what happened to all your HTML code?
It's in one of those bundles there, okay.
So all the templates that you've written is all there in one of those bundles,
except the index.html page.
You need the index.html page explicitly because,
when a user types in the URL for
your website into the browser address bar.
Then you would land at your website and
the index dot HTML pages where you start everything and
you need that to bootstrap your Angular application so that is why that is there.
And then you also see the fontawesome files there that are necessary and
that inside the asset you see some images there, in the assets folder.
So taking a quick look at main file, you'll see that this is
as you can see is a many file compressed concatenated set of files.
Now, if you try to read that, it's not going to be easy,
it's a huge file with a lot of things.
This is also includes all the Angular frameworks code,
a hand your code that you have written.
And the code that comes from Angular Material, Flex Layout and
every other thing that you included with your Angular application.
Similarly, you have polyfills and then styles and
you begin to see that all the things that you use within your Angular
application have been bundled together into these files there.
So with this I hope you got a quick overview of webpack.
Now it is time for us to go to the exercise, where we will simply make use of
Angular CLI ng build command to build this distribution folder.
And you will see how you can deploy your Angular application to a website.
Right after you complete the build.
[MUSIC]