Master Webpack Ultimate Course to Bundle, Optimize Your JavaScript Projects Like a Pro in VS Code
Jan 9, 2025
Get the full source code of application here:
https://github.com/gauti123456/webpack-starter
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this webpack ultimate course so in this video I will
0:06
actually show you how to set up web pack for a front-end development environment
0:12
if you are using vs code I will show you step by step and it will actually
0:17
compile all your assets CSS SAS code and also your es6 JavaScript code into a
0:26
minified code that you can actually run it in the browser so you can see we are
0:31
actually having this directory structure so inside the source directory we have the assets folder where you can actually
0:38
place your image file so we have this nice little SVG file right here then we have the S SAS file which actually
0:46
compiles to CSS so a web pack which will actually compiles this SAS file to CSS
0:52
and then we have this Javascript file right here which actually uses es6 modules which uses import statements
1:00
this export statement so you can just clearly see this code if you want to directly use this code in the browser
1:06
SAS is not browser doesn't understand SAS browser doesn't ex understand these
1:12
import statements if you want to directly execute it this code will not execute that's why the compiler the
1:19
bundler webpack exist so we have this index.js file which actually is the main
1:25
point of our application so right here we are importing this generate joke and we are importing our SAS files the SVG
1:32
file and then we are directly binding everything which is actually present
1:37
this inside this template. HTML so right inside this we have this image we have
1:42
this H3 tag we have the div so we have this button so essentially what we are
1:48
doing in this application we are making a simple axio call to the rest API to actually generate a random joke and also
1:54
we are using a low Dash Library which is both the required syntax and also the
1:59
import statement so if you want to import the third party npm modules which are which can be commonjs which can use
2:06
es6 mod import statement so you can see we are using require and Import in the same file so you can use both these
2:14
modules so this is actually our main webpack config JS file so for your webpack project you need to initialize
2:21
this webpack config file which actually I will show you explain you all these options in detail which option means
2:29
what so in this demo video I just want to show you the demo right here so in
2:34
the package.json file if you see we have these two scripts right here if you want to build your project for production we
2:40
execute will we will execute this command build command if you want if you are developing your project if you are
2:46
on a development environment you will Ex execute this command which is npm runev
2:51
so first of all what I will do I will simply run the development command and npm run Dev deev so what it will do it
3:00
will start a local development server where it supports hot reloading so if
3:06
you make any sort of change the application will restart you no longer need to every time run this command so
3:14
it is just starting so it is actually building your all your assets which is
3:19
actually present the SVG the SAS file the JavaScript code so now you can see
3:25
it has been initialized and your server is listening it has automat atically open it Local Host
3:31
3000 and also it also comes with the bundler analyzer so here you can
3:37
actually see which libraries are taking which space so you can see we are using the low Dash Library which is taking a
3:44
lot of space so that's why it is highlight it you can even zoom in as well so these are different packages
3:49
that we are using so webpack bundler analyzer actually allows you to actually see which modules is taking which kind
3:56
of space as well this is our Simple app we have this simple uh joke which is
4:02
actually feted from a rest API we using a exio third party nodejs module and you
4:08
can see that if I click the button a random job Pops in so we have actually used this SVG image that we are
4:14
displaying it right here in the browser so this is the same SVG image which we stored in the assets so you can just see
4:23
if I make any sort of change if I want to change my SAS file if I pick another background color so it actually supports
4:30
hot reloading so as you change your code it will hot Auto reload so now it will
4:36
see it will automatically refresh I haven't refreshed the page the application has restarted so you you can
4:43
see I made a change in my SAS file similarly you can add some uh let's suppose you can add a
4:50
alert statement in the JavaScript so if I just
4:55
make this change you will actually see the application webpack will automatically start your
5:00
application so it will build out you will see now High world so you can just
5:09
see so it is just saying that entry point size limit the following entry point combine asset size okay okay
5:18
so this can happen sometimes if your size of the image is pretty large so what I will do I will simply remove it
5:25
so now it will automatically restart so that's not a problem it was just my
5:32
local machine problem so now the second thing guys if
5:38
you want to bundle everything if you are deploying this project to production you will use the second command which is the
5:44
build command so what you will see you will simply write this command npm run
5:50
built so you can just see on the left hand side as I run run this command a
5:55
folder will be created a disc folder once again it will start this application
6:04
but now you will see actually your disc folder is created and you will actually see a bundle file has been created and
6:12
also the source map file is also been generated which is really useful if you want to debug your code so this is your
6:19
minified index.html file right here you can directly run this as well
6:25
or it has started this
6:30
if you see it has started this bundler analyzer which is Local Host Triple 8
6:38
Local Host 888 so here it comes with the bundle that you are so it clearly shows
6:45
which library is taking the most space so you can see index CHS plus 52 modules concatenated and this low Dash Library
6:52
taking the most space so it clearly shows you in the bundler analyzer and now the this is
6:59
your application you can even run this with live server as well which is a vs code extension and now your application
7:06
runs you can click the button and a random joke will pop in so this is actually the setup that I will show you
7:13
guys how to actually set up this the webpack environment you can actually develop any application react
7:20
application View application you can use any front end framework the setup will remain the same you need to initialize a
7:26
webpack config.js file with all the options options I will show you step by step so we will see you guys in the next
7:33
video we will start setup uh now to get started guys I will simply make a new
7:39
directory to actually set up the web pag environment so I will CD into the root
7:46
directory I'll will just make a new directory weback environment I will CD
7:51
into the folder and open it inside vs code so you can see we are starting it
7:56
from scratch so the very first thing you need to do you need to initialize the package.json file so npm in a-y so it
8:05
will create this with the default options and also we need to create two
8:10
directories first is the source directory where we will actually be
8:15
writing the actual source code which needs to be
8:20
compiled by webpack and then we need to install webpack as a Dev dependency so you will
8:29
simply say dasd and then let me just uh open my
8:34
zoomit tools so that I can zoom in to the screen so that you can clearly see
8:40
what I am executing so now we actually need to
8:48
install this webpack and webpack CLI tool as a depth dependency so we
8:53
actually added this dasht flag which actually stands for it is not production
8:59
level dependency it is just used for the development so it's a Dev dependency we are using the web pack which is the main
9:06
compiler and the bundler and then the webpack CLI which actually support all
9:12
these commands to actually build your application or and start it in a development
9:17
environment so install it npm D
9:22
i-d so if you see after this it will actually inside your package.json it
9:28
will actually add this inside Dev dependencies so we are using the latest version of each
9:35
dependency so if I show you my node version which is uh 20 I think I'm using the latest
9:42
version which is 20.9 point0 you can see so now the next thing we need to do
9:49
we need to actually write some code right here so we can create a folder in this Styles
9:55
folder so just create a file right here which I will call this as template.
10:07
HTML okay let me just first of all create the file and then create the
10:13
directory so right in the source directory we'll create a folder called file template. HTML so here we'll be
10:20
writing the HTML code and then we will have a Styles directory and uh then we also will be
10:28
having a asset directory where you will actually store all your images so if you want to use your images inside the
10:35
application you will store it so once such image I will create is uh joke
10:40
image so I will simply say joke. SVG so I have this code of this
10:47
so this is not mandatory that you want to use the same code I'm
10:52
just just showing you very basic example you can write your own code as
10:58
well so it's not mandatory that you want to do this so we have this image which is stored assets and then inside the
11:05
Styles I will Define my stylesheet so I will call this style. SAS so it is actually using the SAS file which is not
11:14
understandable by browser directly you can't execute SAS so it needs to be compiled to CSS so I will actually paste
11:22
the sample code of SAS just to save some time because this
11:28
video is not about the overall application I just want to set this application so we have defined the SAS
11:34
file so it actually uses the concepts of SAS so we have defined some variables right at the top which of primary color
11:41
secondary color box Shadow so the this is a advantage of using SAS because you
11:46
can actually change the variables and it will reflect in all these locations at
11:52
once so after you define this come to the template. HTML so here you will Define a very basic example example so I
11:59
will say web pack example so you can even change this
12:04
title dynamically as well using when we Define the webpack config.js file I will show you how to change this title and
12:11
how to get this title dynamically for the time being we will simply be having a simple index.
12:18
HTML so what I will do inside the HTML we will have a simple
12:25
container class and here you'll be having the image so this image will be present inside
12:33
uh so we'll just give it an ID for now we will not be attaching it directly we
12:39
will using the JavaScript for that and we will have H3
12:46
Tag jok app then we'll Define a simple div
12:53
attack we will give it an ID of joke and a class of joke as well
12:59
after this we will simply have a button to actually trigger get another joke so
13:05
when we when the user clicks this button then we will actually make a request to the API to actually fetch the request
13:12
fetch the joke and display it this is all that is required for the
13:17
HTML so you can just see we are not including any CSS or JavaScript directly
13:22
inside template. HTML we'll do it using webpack dynamically when we create this
13:28
file so now we can create that file simply in the root directory just create
13:33
webpack doc config.js you can just see that icon has
13:39
also been changed it has been recognized that it's a webpack config file so you need to Define this file for every
13:45
webpack project so here it actually includes all the options which are required so I will show you step by step
13:53
so the very first thing we need to Define is actually the module. exports
14:00
which is essentially it returns it's simply a function inside this here you need to Define all your first of all the
14:07
mode so in which mode you are working so there are essentially two modes either production or development so we will
14:15
simply be saying we are using the development mode because we are developing the application and then we
14:20
have the second option which is actually say the entry file so which file you need to compile so essentially we will
14:27
Define a file write in the source directory which is index.js so this is
14:33
actually the entry level file you can even change the name so by default it
14:39
webpack looks for index.js you can even change this name as well so essentially
14:44
you'll be having a simple let me install a XO uh a package right
14:51
here of lash and exos so these two packages
14:57
these two third party packages we are installing it from node so once you install it we can use
15:04
simply this package const we can require this package L
15:10
Dash then we can simply use a simple function of
15:16
it which is a chunk function so if you have a array right here if you have used
15:22
L Ash in the past you will know this function it will actually divide this array into two elements so this will be
15:28
one 1 2 3 so it will be dividing this array into three pieces so this is a
15:34
simple index.js file that we have so now if you want to compile this we need to give it in the entry right here so this
15:42
will actually say bundle so here it takes the bundle property and here you need to provide
15:48
the path so now if you want to provide the path we do need to use the nodejs
15:53
buil-in package which is path so this is we will use this pack
15:59
package to actually provide the path so path. resolve function so it is present
16:04
in the source directory SL
16:10
index.js so if you have a any other name if you have defined the file with any
16:15
other name you will provide this name right here so by default it is
16:22
index.js and then comes the output so output simply means that whenever you
16:28
execute the npm Run build command so where will be the output will be stored
16:34
so here you can Define your directory by default the directory name is dist so
16:39
again we'll be defining a path variable so again we'll be using path resolve so
16:46
dur name and followed by the directory name so by default it actually creates a
16:53
dis directory you can even change the folder name as well so you can change it to any folder name so I will stick to
16:58
the default option so then it takes the second option which is actually the file
17:04
name so file name is essentially the one single file which will be created which will actually contain both your CSS and
17:11
the JavaScript code so essentially it is called index CHS but I will change the
17:18
name so I can simply write here the name followed by
17:29
the extension which is JS you will also be adding a Content
17:35
hash like this this is actually the structure so when your file is generated
17:40
it actually also contains a hash value as well followed by the
17:46
name and then we also have some additional options right here if you want to clean your code we will simply
17:53
put it to true and uh for now this is all that that we
18:01
need and we have defined the entry file we have defined the output as well and
18:08
now if you want to actually we need to define a script
18:14
inside package.json so right in the script section we can Define two scripts
18:19
first for the development and second for the built section so we will simply say web pack and the second script for the
18:26
build so there is a command in web pack which will simply web pack
18:32
build let me cross check so yeah web pack and for the build
18:40
and for the development it is webpack serve so okay for the development which
18:45
is webpack serve and for the building the project you will simply say webpack
18:50
that Sol so if you now try to execute this command npm run build so you will see on
18:57
the left hand side it will create a dis directory it will compile all your
19:04
code so for the very first time it will take some 5 to 10 seconds you can see it is now it has compiled it it has created
19:12
this directory disc directory if you try to open this directory it will simply contain a single file which is bundle
19:19
file so no HTML file is there only the JavaScript is there you can see the
19:25
bundle which we Define the the name and followed by the hash symbol right
19:31
here so you if you want to also create the HTML file as well we need to provide
19:37
an option for this so by default only this file has been
19:44
compiled this index.js this code that you have written only this code has been compiled the SAS code is not been
19:51
compiled which is written inside style. SAS this code is not compiled for this
19:56
you need to additionally install something called as loader which is there in webpack which takes care of any
20:04
other file that you define which is SAS file or any other file so a concept
20:09
called as loaders you need to install it so now we will install those loaders which will take care for the SAS which
20:17
you have defined right here so what I will do those components we
20:24
need to install so just
20:29
npmi and then we again we need to install it as a dep dependency
20:35
dasd so these loaders which is CSS Dash loader and then SAS
20:42
SDS loader and then the style loader so
20:47
these three loaders are required if you are using SAS inside your application you need to install this as a Dev
20:54
dependency CSS loader SAS loader and the style loader simp simply install
21:06
this so now after installing this in the webpack config.js file if you want to
21:13
install loader there is this option that you can do
21:18
this put a comma right here after output and in order to define the loader we
21:25
have this module object inside this object we have this
21:32
rules and here you can provide uh you can Target any file so this will be an array so we are targeting multiple files
21:39
so it actually contains array of object so the very first object that we are defining so it actually contains the
21:47
test value so this will be a simple regular expression so here we will Target all
21:54
the files which are ending with SAS SC CS so dollar
22:01
sign this is essentially a regular expression so here it is actually telling the web pack to actually Target
22:07
all the files which are ending with SAS and the second property is which loader to use so here the use property is there
22:15
so here we'll be loading uh using multiple loaders first will be the style
22:22
loader so all the loaders that we have installed style loader then we will use the CSS loader
22:31
and then we will use the SAS loader like this so now you can see we
22:38
are using all these three loaders to actually compile this SAS
22:45
file and that's all and uh also the second file we will be using is
22:53
actually if you have images right you can see we are using a SVG file for that
22:59
also we need to use the loader for this so we'll Define the second object here
23:04
so test property here will be will be essentially be targeting all the images which are ending with PNG jpg do jpeg or
23:12
GI file you can provide more extension and then this is a type asset /resource
23:18
so this is constant you need to copy this if you're using images so this is required because
23:25
images are required in every application so you need to write this
23:30
so after doing this uh if you execute npm run build again let me execute npm run
23:38
build so now you can see again no HTML file is generated only the Javascript
23:46
file is generated but now it has compiled the SAS file and also your SVG
23:51
file as well but now if you want to also generate this
23:57
uh HTML file as well for that we need to install another plug-in which is
24:03
required in webpack which is HTML webpack
24:08
plug-in so this actually allows you to actually generate HT HTML file as well
24:14
so there is this you again dashd for Dev dependency so
24:20
html-webpack-plugin so this is actually the dependency HTML
24:27
d webpack Dash plugin so simply install
24:35
this so this is not a loader this is a plugin so webpack has loaders it has
24:42
plugins so now to initialize a plugin it is slightly different so if you come to
24:48
the file webpack config JS so we don't need to Define it in the module so just
24:53
put a comma and we will come to the plugin plug-in section so plugin and
24:58
here you will be defining a array so you can have multiple plugins so now we will be defining our
25:05
HTML first of all we do need to require it at the top we forgot I think to
25:10
Define it okay we do need to Define it at the top require this as the plug-in
25:19
HTML web pack
25:37
HTML webpack plugin and that's all so after you require it
25:42
now you can instantiate a new reference of this HTML webpack
25:54
plugin so this takes a object inside this
25:59
so the object actually takes the title so whatever is you want to give the title to your app you will give the
26:05
title right here so let me give here webpack simple example web
26:11
app so you can give your own title and then you can give the file
26:18
name so what file name that you want to generate so you'll need to generate the default index.html so you can change the
26:25
file name as well and then here you need to provide the template so here the template whatever we have
26:30
defined it we have stored this inside the source folder and it is being template. HTML so here you need to
26:37
provide the path of that file so these it takes these three options the title
26:42
file name and the actual template that needs to compile so after you that you
26:48
can actually replace this Dynamic title instead of this static title so you can
26:54
actually change this name
27:00
so how you need to do this uh it's very easy just write for this percentage is equal to
27:08
and Then followed by the variable HTML web
27:13
pack plugin so this needs to be constant H needs to be small W is capital P is
27:21
capital just make sure that you do this as it is do app options and it contains
27:27
a property which we have defined which is title and close it so it will now replace that Dynamic
27:33
title that we have defined right there so now if you run this npm run
27:39
build command so what you will see so it will now also generate the
27:45
index.html file as well so you can see that it will automatically include that
27:50
bundle file automatically we don't need to include it manually so if you try to
27:56
open this app you open this with live
28:04
server let me see so you can see that JavaScript code
28:10
is automatically executed so you can see we have defined this uh low Dash function which
28:16
actually uh divided the array into three pieces so you can see whatever is our
28:21
JavaScript code is actually executed but the SAS code is not executed whatever we
28:27
defined in the JavaScript it was uh converted into the browser
28:33
code so now why is not the SAS is applied let me see I think I made some
28:39
kind of mistake in the if you also check the title the title is webpack simple
28:45
example app so the title is also reflecting uh I think let me see the
28:52
webpack file let me see if I make some kind of error from right
29:08
here uh rules is we have defined this
29:16
everything so essentially for compiling the SAS we require to actually include
29:21
this module so what I will do I will simply copy this I think I made some
29:28
kind of typo
29:35
mistake let me copy this and paste
29:47
it just delete this this is for JavaScript if you want to use Babel I
29:52
will show you later on how to use Babble but this is for SAS file this is for images
29:59
so here these are two loaders that we using these three loaders that we
30:09
installed okay this is mode is development let me change this to production I think that was creating
30:14
some kind of problem npm run build
30:28
so now if you see
30:35
it if I open
30:40
this let me see guys what is the problem why it does not executing uh hi guys I
30:46
figured out the error the error was pretty basic I do need to include the
30:51
SAS file in the index.js because this is actually the file that we are compiling so
30:58
we haven't included the SAS file and also we haven't included the SVG image that's why it was not appearing so right
31:05
here we do need to include this so how we include this it's very simple we
31:12
actually import this at the very top the SAS file which we can import
31:18
this using the import statement so import so it is actually presented in the Styles folder
31:25
slash the file name which is Main do SAS file and similarly we also need to
31:31
import the which is joke image from it is
31:39
actually present in the assets folder and then it is actually
31:48
joke image.svg sorry joke
31:56
sorry to s FG so now you can
32:02
actually assign add this image to the HTML dynamically using JavaScript we
32:09
have given an ID to it to the image tag so we can simply use
32:15
document. get element by ID so laugh image you see the template HTML we given
32:22
this ID so we are simply targeting it The Element by its ID and then simply saying laugh image. source is equal to
32:29
love
32:35
image sorry this is joke image
32:41
sorry so after you do this now hopefully if I run this command npm run
32:48
built you will actually see the SVG file will also get created but there is a
32:54
problem which will be there it is actually saying that this file doesn't exist in the oh sorry we have given
33:02
style CSS not main CSS simply change the name I think some problem will occur
33:10
when we execute this hopefully
33:17
not so it is compiling the assets and if you see now the image is also generated
33:23
it has given a random name to this image but I will show you how to fix this if you want a original name to be retained
33:30
and then this is actually the bundle JS and hopefully if I try to open this file now in the browser you will actually see
33:37
the SAS will also get compiled you will see that the SAS has also been compiled
33:43
and there is a button right here this doesn't work because we
33:48
actually doesn't binded anything to this button but the application is working and uh now the thing is that we can
33:57
actually be having a development server if let's suppose if I make some kind of change I don't want to use this npm run
34:04
build again and again so for that there is the actual dependency that you can use which is a webpack development
34:11
server so there is this dependency npmi DD for saving it as a dep dependency
34:18
this actually is weback dasde
34:24
server this is the name of this dependency so this is actually used for development purposes so if you are
34:30
developing it if you make some kind of changes this development server will hot
34:36
reload so simply install this so after you install it we do need to configure
34:42
it so open your webpack config CHS file and right here there is an option that you need to add which
34:50
is Dev server right after the output you can
34:55
simply give dep server and it will be an object and uh
35:03
it will take some properties first is the static property it's an object and here you need to give the directory in
35:10
which directory you need to sa so I need to actually create a dis
35:16
directory so likewise that we done inside the output when we run the build command it
35:23
will also create a dis directory when we click when we run it in the development in assment just put a
35:30
comma and the second and here the port number you can control which port number it runs you
35:37
can run it 3,000 port number and then opens true it will actually open it
35:43
automatically whenever you execute this and then the thought reload functionality to also true it will also
35:50
automatically restart and compress so gzip compression is there automatically
35:56
so just put it to true so your assets and files will be compressed using the
36:01
gzip compression algorithm in the browser and then the last property is this history API fallback this option we
36:10
need to set it to True like this so after you do this now
36:15
there we if I execute this command now npm run build sorry npm run Dev so it
36:21
will actually start this development server npm run def
36:29
so now it will start a development local development
36:34
server on Local Host 3000 if you see that it will automatically open it and
36:40
now your application is there so the thing about this server is that you can make any sort of changes let's suppose
36:46
if you want to change the background color if you want to change it to a different
36:51
color let me change this color so what you will find it will automatically
36:57
reload you can see that the application changes you can even change the JavaScript code as well let's suppose
37:03
the main JavaScript code so if I add a alert statement right
37:09
here so if I make this change you can see I'm not reloading the page automatically it execute this this is
37:17
meant by the development server which webpack offers you need to configure
37:23
like this and now the next uh dependency I will show you if I want to actually
37:29
generate retain the original name of this file joke SVG because it has been replaced by a random name so if you want
37:37
to retain the same name there is a option right here inside your webpack config JS file so what you need to do
37:45
write here in the module in the type
37:52
parameter I think here you need to configure this option yeah in the output
37:58
object right here they need to add another property which is asset module file name so here you're
38:07
defining whatever is the file name which is given which is name
38:13
extension just the name and extension that's all so now if you execute the same
38:19
command npm run buil your original file will be retained
38:30
so now you can see that the original file name is retained so this way actually your images you will actually
38:37
know which image is this because it will not be replaced by a random name so
38:43
again if I open this the functionality Remains the Same so whatever is your
38:48
code is executed and now we will actually come to the application uh we will simply be using xos we will simply
38:56
Define a let's suppose another file right here
39:01
you can have multiple files in your project as well so you can have generate joke dogs what what this file will do it
39:10
will actually make a simple AOS
39:17
request let me copy this and paste it so you can see we have defined a simple
39:22
function generate joke which actually makes a simple call to the rest API and
39:27
it actually binds it manipulates the inner HTML of the actual joke element in
39:33
the HTML by response. data. joke and also we are importing the low Dash Li as
39:38
well right here but we have done this in the index.js so I will just simply delete this now to import this in the
39:46
main file we simply need to use the import
39:52
statement so that we can import this you can
39:58
import generate joke from this module by
40:03
the using the import statement and then we will simply be executing this generate joke function that's
40:12
all I will delete this hello alert statement so once again if you
40:18
now build your project npm run built
40:28
so now you can see all your assets all your JavaScript SAS has been
40:33
compiled and now if you try to open this you will now see if you hit this
40:40
button but okay okay I do need to attach this to the button as
40:46
well so what we will do go to the
40:52
index.js so when we open the application this function will execute but also when
40:57
we click the button as well so we need to get the button
41:08
reference joke button so when we click this button you will execute this method as
41:15
well so once again do this npm run build
41:28
so now if you try to open this click this button so now you will
41:34
see as I click the button random joke is generated and it is fetched from the API
41:39
and displayed it so if you see the console as well the low Dash code is also executed the exos is also executed
41:48
this is actually the setup for web pack so if you're developing any project using webpack you can develop react view
41:56
any front end framework this is Ultimate setup you do you just need to do it once
42:01
so you can just make a GitHub repo and then you can clone it anytime whenever
42:07
you are developing a front-end project so this makes it really easy for using
42:12
any third party modules and then compiling it to a single page application which you can deploy it in
42:19
any any hosting plan so the last thing that I want to show you it also comes with the bundle
42:26
analyzer so if you actually build your application if you want to check out which dependency is taking which space
42:32
so there is a specific dependency which is there inside webpack so another we can install it as a depth dependency
42:39
which is webpack bundle
42:44
analyzer so simply install this so the configuration is really
42:51
simple just open your webpack config JS file and write at the bottom side
42:58
we can include this just after it is ending right here in the plugin section
43:03
this is also a plugin so new bundle so we do need to import this
43:09
plugin right at the
43:26
top bundle analyzer and uh it contains a function which is
43:32
bundle analyzer plug-in so after you do this we can simply make a new reference
43:40
of this new new Constructor new bundle analyzer plugin just put a semi
43:49
parenthesis so now if you do this uh npm run built so what it will do
44:00
it will also open a new port for the bundle analyzer so here you can check which
44:07
modules it's taking which space so low Dash is actually taking the most of the space and then which is index CHS plus
44:14
52 modules concatenated into a single file so this is actually the overall
44:19
structure of your project and uh this is really useful whenever you're developing a large project you will be able to see
44:26
which modules are the most of the space so that was the ultimate tutorial guys of using webpack in any setup in vs
44:34
code so thank you for watching this video and I will be seeing you in the
44:40
next video
#Programming
#Educational Software
