In the previous course on Bootstrap 4,
we had seen the use of NPM scripts,
Grunt and Gulp for building the distribution folder for our website.
We had seen how these scripts can be used for doing concatenation,
uglification and minification in order to build
the distribution folder which can then be deployed to our website.
That pack is another approach that helps us do exactly the same.
That pack is what is called a module bundler.
What exactly is Webpack and how does it help us to build the distribution folder?
We will examine a little more details about that in this lecture and
also see how we can use it in the exercise that follows.
For our React Application,
we had used Create React App to scaffold out our React Application.
Create React App itself,
uses React scripts and NPM module underneath for supporting
all the various activities that we need to do for our React Application.
It internally uses Webpack to do the building of the distribution folder.
So, in the exercise,
we will examine how we can make use of it to build our distribution folder.
Before that, let's learn a little bit about Webpack.
Now, this lecture is not about how you make use of the pack.
That is beyond the scope of this course.
Instead, I will briefly mention of what Webpack enables us to do.
Now to learn how do we make use of the Webpack,
you would have to go to the Webpack's documentation and then read that up.
Since our React Application is already set up
with Webpack and all the configuration is automatically done for us,
we don't need to worry about setting up the pack.
That automatically comes for the light with our React Application.
So, obviously, the first question that arises in your mind is,
what exactly is Webpack? What are we talking about?
Webpack, this is a definition from the Webpack documentation itself.
It says, Webpack is a module bundler for modern JavaScript applications.
Now, what Webpack does is,
it looks at the entire structure of your application.
So, it recursively traverses through your code looking to see how best
to bundle the information into what is called as bundles.
Then that pack looks at your code.
It treats every file that you have,
be it a JavaScript file,
be it a CSS file,
be it a Sass 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 this modules
into what are called 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 a pack.
Now, don't get too concerned.
That pack knows how to package them and treat
them as JavaScript modules when it prepares those bundles.
So, a bundle is something that groups together modules that belong together.
So, it bundles those modules together that should be served
to the client in a single response to a request.
So that pack itself makes a decision on saying,
what part 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?
So, what Webpack does is,
it starts at the top most level.
So, it's starts there and then it follows all the imports that you use in those
down their path and build up a hierarchical organization of all the different parts.
So, what is called as a dependency graph is built by the pack.
Now, using this dependency graph,
that pack then decides how to package its bundles and that emits
one or more bundles as they make sense
for your particular application that Webpack is bundling.
In the process of doing it,
when it is handling non-JavaScript files, like CSS,
HTML and Sass or images and so on,
then it uses plugins that enable you to pre-process and minify those files,
those non-JavaScript files into a way that they can be bundled into your Webpack bundles.
If you are 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 should be included in the root folder of your application.
Now, when we talk about Webpack,
there are four concepts that are important for
us to understand on how Webpack works on things.
The first one is entry.
Entry is a point that which the Webpack should
start and follow down to build the dependency graph.
Now, the second part is what we'll call the output.
In Webpack, the output is the set of bundles that are 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,
like compilations that you need to do for building up your bundles.
So, it will help you to transform your CSS into
a way that you can package into your JavaScript bundles and so on.
So, that is a quick introduction to how Webpack actually works.
Now, that we have briefly learnt about Webpack and Webpack concepts,
let's move on to the exercise.
We will make use of React scripts which uses Webpack
to generate the build folder for our React Application.
Jogesh K. MuppalaAssociate Professor
