Master Webpack Ultimate Course to Bundle, Optimize Your JavaScript Projects Like a Pro in VS Code

uh hello guys welcome to this webpack ultimate course so in this video I will

actually show you how to set up web pack for a front-end development environment

if you are using vs code I will show you step by step and it will actually

compile all your assets CSS SAS code and also your es6 JavaScript code into a

minified code that you can actually run it in the browser so you can see we are

actually having this directory structure so inside the source directory we have the assets folder where you can actually

place your image file so we have this nice little SVG file right here then we have the S SAS file which actually

compiles to CSS so a web pack which will actually compiles this SAS file to CSS

and then we have this Javascript file right here which actually uses es6 modules which uses import statements

this export statement so you can just clearly see this code if you want to directly use this code in the browser

SAS is not browser doesn't understand SAS browser doesn't ex understand these

import statements if you want to directly execute it this code will not execute that's why the compiler the

bundler webpack exist so we have this index.js file which actually is the main

point of our application so right here we are importing this generate joke and we are importing our SAS files the SVG

file and then we are directly binding everything which is actually present

this inside this template. HTML so right inside this we have this image we have

this H3 tag we have the div so we have this button so essentially what we are

doing in this application we are making a simple axio call to the rest API to actually generate a random joke and also

we are using a low Dash Library which is both the required syntax and also the

import statement so if you want to import the third party npm modules which are which can be commonjs which can use

es6 mod import statement so you can see we are using require and Import in the same file so you can use both these

modules so this is actually our main webpack config JS file so for your webpack project you need to initialize

this webpack config file which actually I will show you explain you all these options in detail which option means

what so in this demo video I just want to show you the demo right here so in

the package.json file if you see we have these two scripts right here if you want to build your project for production we

execute will we will execute this command build command if you want if you are developing your project if you are

on a development environment you will Ex execute this command which is npm runev

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

will start a local development server where it supports hot reloading so if

you make any sort of change the application will restart you no longer need to every time run this command so

it is just starting so it is actually building your all your assets which is

actually present the SVG the SAS file the JavaScript code so now you can see

it has been initialized and your server is listening it has automat atically open it Local Host

3000 and also it also comes with the bundler analyzer so here you can

actually see which libraries are taking which space so you can see we are using the low Dash Library which is taking a

lot of space so that's why it is highlight it you can even zoom in as well so these are different packages

that we are using so webpack bundler analyzer actually allows you to actually see which modules is taking which kind

of space as well this is our Simple app we have this simple uh joke which is

actually feted from a rest API we using a exio third party nodejs module and you

can see that if I click the button a random job Pops in so we have actually used this SVG image that we are

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

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

hot reloading so as you change your code it will hot Auto reload so now it will

see it will automatically refresh I haven't refreshed the page the application has restarted so you you can

see I made a change in my SAS file similarly you can add some uh let's suppose you can add a

alert statement in the JavaScript so if I just

make this change you will actually see the application webpack will automatically start your

application so it will build out you will see now High world so you can just

see so it is just saying that entry point size limit the following entry point combine asset size okay okay

so this can happen sometimes if your size of the image is pretty large so what I will do I will simply remove it

so now it will automatically restart so that's not a problem it was just my

local machine problem so now the second thing guys if

you want to bundle everything if you are deploying this project to production you will use the second command which is the

build command so what you will see you will simply write this command npm run

built so you can just see on the left hand side as I run run this command a

folder will be created a disc folder once again it will start this application

but now you will see actually your disc folder is created and you will actually see a bundle file has been created and

also the source map file is also been generated which is really useful if you want to debug your code so this is your

minified index.html file right here you can directly run this as well

or it has started this

if you see it has started this bundler analyzer which is Local Host Triple 8

Local Host 888 so here it comes with the bundle that you are so it clearly shows

which library is taking the most space so you can see index CHS plus 52 modules concatenated and this low Dash Library

taking the most space so it clearly shows you in the bundler analyzer and now the this is

your application you can even run this with live server as well which is a vs code extension and now your application

runs you can click the button and a random joke will pop in so this is actually the setup that I will show you

guys how to actually set up this the webpack environment you can actually develop any application react

application View application you can use any front end framework the setup will remain the same you need to initialize a

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

video we will start setup uh now to get started guys I will simply make a new

directory to actually set up the web pag environment so I will CD into the root

directory I'll will just make a new directory weback environment I will CD

into the folder and open it inside vs code so you can see we are starting it

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

will create this with the default options and also we need to create two

directories first is the source directory where we will actually be

writing the actual source code which needs to be

compiled by webpack and then we need to install webpack as a Dev dependency so you will

simply say dasd and then let me just uh open my

zoomit tools so that I can zoom in to the screen so that you can clearly see

what I am executing so now we actually need to

install this webpack and webpack CLI tool as a depth dependency so we

actually added this dasht flag which actually stands for it is not production

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

compiler and the bundler and then the webpack CLI which actually support all

these commands to actually build your application or and start it in a development

environment so install it npm D

i-d so if you see after this it will actually inside your package.json it

will actually add this inside Dev dependencies so we are using the latest version of each

dependency so if I show you my node version which is uh 20 I think I'm using the latest

version which is 20.9 point0 you can see so now the next thing we need to do

we need to actually write some code right here so we can create a folder in this Styles

folder so just create a file right here which I will call this as template.

HTML okay let me just first of all create the file and then create the

directory so right in the source directory we'll create a folder called file template. HTML so here we'll be

writing the HTML code and then we will have a Styles directory and uh then we also will be

having a asset directory where you will actually store all your images so if you want to use your images inside the

application you will store it so once such image I will create is uh joke

image so I will simply say joke. SVG so I have this code of this

so this is not mandatory that you want to use the same code I'm

just just showing you very basic example you can write your own code as

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

Styles I will Define my stylesheet so I will call this style. SAS so it is actually using the SAS file which is not

understandable by browser directly you can't execute SAS so it needs to be compiled to CSS so I will actually paste

the sample code of SAS just to save some time because this

video is not about the overall application I just want to set this application so we have defined the SAS

file so it actually uses the concepts of SAS so we have defined some variables right at the top which of primary color

secondary color box Shadow so the this is a advantage of using SAS because you

can actually change the variables and it will reflect in all these locations at

once so after you define this come to the template. HTML so here you will Define a very basic example example so I

will say web pack example so you can even change this

title dynamically as well using when we Define the webpack config.js file I will show you how to change this title and

how to get this title dynamically for the time being we will simply be having a simple index.

HTML so what I will do inside the HTML we will have a simple

container class and here you'll be having the image so this image will be present inside

uh so we'll just give it an ID for now we will not be attaching it directly we

will using the JavaScript for that and we will have H3

Tag jok app then we'll Define a simple div

attack we will give it an ID of joke and a class of joke as well

after this we will simply have a button to actually trigger get another joke so

when we when the user clicks this button then we will actually make a request to the API to actually fetch the request

fetch the joke and display it this is all that is required for the

HTML so you can just see we are not including any CSS or JavaScript directly

inside template. HTML we'll do it using webpack dynamically when we create this

file so now we can create that file simply in the root directory just create

webpack doc config.js you can just see that icon has

also been changed it has been recognized that it's a webpack config file so you need to Define this file for every

webpack project so here it actually includes all the options which are required so I will show you step by step

so the very first thing we need to Define is actually the module. exports

which is essentially it returns it's simply a function inside this here you need to Define all your first of all the

mode so in which mode you are working so there are essentially two modes either production or development so we will

simply be saying we are using the development mode because we are developing the application and then we

have the second option which is actually say the entry file so which file you need to compile so essentially we will

Define a file write in the source directory which is index.js so this is

actually the entry level file you can even change the name so by default it

webpack looks for index.js you can even change this name as well so essentially

you'll be having a simple let me install a XO uh a package right

here of lash and exos so these two packages

these two third party packages we are installing it from node so once you install it we can use

simply this package const we can require this package L

Dash then we can simply use a simple function of

it which is a chunk function so if you have a array right here if you have used

L Ash in the past you will know this function it will actually divide this array into two elements so this will be

one 1 2 3 so it will be dividing this array into three pieces so this is a

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

will actually say bundle so here it takes the bundle property and here you need to provide

the path so now if you want to provide the path we do need to use the nodejs

buil-in package which is path so this is we will use this pack

package to actually provide the path so path. resolve function so it is present

in the source directory SL

index.js so if you have a any other name if you have defined the file with any

other name you will provide this name right here so by default it is

index.js and then comes the output so output simply means that whenever you

execute the npm Run build command so where will be the output will be stored

so here you can Define your directory by default the directory name is dist so

again we'll be defining a path variable so again we'll be using path resolve so

dur name and followed by the directory name so by default it actually creates a

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

the default option so then it takes the second option which is actually the file

name so file name is essentially the one single file which will be created which will actually contain both your CSS and

the JavaScript code so essentially it is called index CHS but I will change the

name so I can simply write here the name followed by

the extension which is JS you will also be adding a Content

hash like this this is actually the structure so when your file is generated

it actually also contains a hash value as well followed by the

name and then we also have some additional options right here if you want to clean your code we will simply

put it to true and uh for now this is all that that we

need and we have defined the entry file we have defined the output as well and

now if you want to actually we need to define a script

inside package.json so right in the script section we can Define two scripts

first for the development and second for the built section so we will simply say web pack and the second script for the

build so there is a command in web pack which will simply web pack

build let me cross check so yeah web pack and for the build

and for the development it is webpack serve so okay for the development which

is webpack serve and for the building the project you will simply say webpack

that Sol so if you now try to execute this command npm run build so you will see on

the left hand side it will create a dis directory it will compile all your

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

this directory disc directory if you try to open this directory it will simply contain a single file which is bundle

file so no HTML file is there only the JavaScript is there you can see the

bundle which we Define the the name and followed by the hash symbol right

here so you if you want to also create the HTML file as well we need to provide

an option for this so by default only this file has been

compiled this index.js this code that you have written only this code has been compiled the SAS code is not been

compiled which is written inside style. SAS this code is not compiled for this

you need to additionally install something called as loader which is there in webpack which takes care of any

other file that you define which is SAS file or any other file so a concept

called as loaders you need to install it so now we will install those loaders which will take care for the SAS which

you have defined right here so what I will do those components we

need to install so just

npmi and then we again we need to install it as a dep dependency

dasd so these loaders which is CSS Dash loader and then SAS

SDS loader and then the style loader so

these three loaders are required if you are using SAS inside your application you need to install this as a Dev

dependency CSS loader SAS loader and the style loader simp simply install

this so now after installing this in the webpack config.js file if you want to

install loader there is this option that you can do

this put a comma right here after output and in order to define the loader we

have this module object inside this object we have this

rules and here you can provide uh you can Target any file so this will be an array so we are targeting multiple files

so it actually contains array of object so the very first object that we are defining so it actually contains the

test value so this will be a simple regular expression so here we will Target all

the files which are ending with SAS SC CS so dollar

sign this is essentially a regular expression so here it is actually telling the web pack to actually Target

all the files which are ending with SAS and the second property is which loader to use so here the use property is there

so here we'll be loading uh using multiple loaders first will be the style

loader so all the loaders that we have installed style loader then we will use the CSS loader

and then we will use the SAS loader like this so now you can see we

are using all these three loaders to actually compile this SAS

file and that's all and uh also the second file we will be using is

actually if you have images right you can see we are using a SVG file for that

also we need to use the loader for this so we'll Define the second object here

so test property here will be will be essentially be targeting all the images which are ending with PNG jpg do jpeg or

GI file you can provide more extension and then this is a type asset /resource

so this is constant you need to copy this if you're using images so this is required because

images are required in every application so you need to write this

so after doing this uh if you execute npm run build again let me execute npm run

build so now you can see again no HTML file is generated only the Javascript

file is generated but now it has compiled the SAS file and also your SVG

file as well but now if you want to also generate this

uh HTML file as well for that we need to install another plug-in which is

required in webpack which is HTML webpack

plug-in so this actually allows you to actually generate HT HTML file as well

so there is this you again dashd for Dev dependency so

html-webpack-plugin so this is actually the dependency HTML

d webpack Dash plugin so simply install

this so this is not a loader this is a plugin so webpack has loaders it has

plugins so now to initialize a plugin it is slightly different so if you come to

the file webpack config JS so we don't need to Define it in the module so just

put a comma and we will come to the plugin plug-in section so plugin and

here you will be defining a array so you can have multiple plugins so now we will be defining our

HTML first of all we do need to require it at the top we forgot I think to

Define it okay we do need to Define it at the top require this as the plug-in

HTML web pack

HTML webpack plugin and that's all so after you require it

now you can instantiate a new reference of this HTML webpack

plugin so this takes a object inside this

so the object actually takes the title so whatever is you want to give the title to your app you will give the

title right here so let me give here webpack simple example web

app so you can give your own title and then you can give the file

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

file name as well and then here you need to provide the template so here the template whatever we have

defined it we have stored this inside the source folder and it is being template. HTML so here you need to

provide the path of that file so these it takes these three options the title

file name and the actual template that needs to compile so after you that you

can actually replace this Dynamic title instead of this static title so you can

actually change this name

so how you need to do this uh it's very easy just write for this percentage is equal to

and Then followed by the variable HTML web

pack plugin so this needs to be constant H needs to be small W is capital P is

capital just make sure that you do this as it is do app options and it contains

a property which we have defined which is title and close it so it will now replace that Dynamic

title that we have defined right there so now if you run this npm run

build command so what you will see so it will now also generate the

index.html file as well so you can see that it will automatically include that

bundle file automatically we don't need to include it manually so if you try to

open this app you open this with live

server let me see so you can see that JavaScript code

is automatically executed so you can see we have defined this uh low Dash function which

actually uh divided the array into three pieces so you can see whatever is our

JavaScript code is actually executed but the SAS code is not executed whatever we

defined in the JavaScript it was uh converted into the browser

code so now why is not the SAS is applied let me see I think I made some

kind of mistake in the if you also check the title the title is webpack simple

example app so the title is also reflecting uh I think let me see the

webpack file let me see if I make some kind of error from right

here uh rules is we have defined this

everything so essentially for compiling the SAS we require to actually include

this module so what I will do I will simply copy this I think I made some

kind of typo

mistake let me copy this and paste

it just delete this this is for JavaScript if you want to use Babel I

will show you later on how to use Babble but this is for SAS file this is for images

so here these are two loaders that we using these three loaders that we

installed okay this is mode is development let me change this to production I think that was creating

some kind of problem npm run build

so now if you see

it if I open

this let me see guys what is the problem why it does not executing uh hi guys I

figured out the error the error was pretty basic I do need to include the

SAS file in the index.js because this is actually the file that we are compiling so

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

here we do need to include this so how we include this it's very simple we

actually import this at the very top the SAS file which we can import

this using the import statement so import so it is actually presented in the Styles folder

slash the file name which is Main do SAS file and similarly we also need to

import the which is joke image from it is

actually present in the assets folder and then it is actually

joke image.svg sorry joke

sorry to s FG so now you can

actually assign add this image to the HTML dynamically using JavaScript we

have given an ID to it to the image tag so we can simply use

document. get element by ID so laugh image you see the template HTML we given

this ID so we are simply targeting it The Element by its ID and then simply saying laugh image. source is equal to

love

image sorry this is joke image

sorry so after you do this now hopefully if I run this command npm run

built you will actually see the SVG file will also get created but there is a

problem which will be there it is actually saying that this file doesn't exist in the oh sorry we have given

style CSS not main CSS simply change the name I think some problem will occur

when we execute this hopefully

not so it is compiling the assets and if you see now the image is also generated

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

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

the SAS will also get compiled you will see that the SAS has also been compiled

and there is a button right here this doesn't work because we

actually doesn't binded anything to this button but the application is working and uh now the thing is that we can

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

build again and again so for that there is the actual dependency that you can use which is a webpack development

server so there is this dependency npmi DD for saving it as a dep dependency

this actually is weback dasde

server this is the name of this dependency so this is actually used for development purposes so if you are

developing it if you make some kind of changes this development server will hot

reload so simply install this so after you install it we do need to configure

it so open your webpack config CHS file and right here there is an option that you need to add which

is Dev server right after the output you can

simply give dep server and it will be an object and uh

it will take some properties first is the static property it's an object and here you need to give the directory in

which directory you need to sa so I need to actually create a dis

directory so likewise that we done inside the output when we run the build command it

will also create a dis directory when we click when we run it in the development in assment just put a

comma and the second and here the port number you can control which port number it runs you

can run it 3,000 port number and then opens true it will actually open it

automatically whenever you execute this and then the thought reload functionality to also true it will also

automatically restart and compress so gzip compression is there automatically

so just put it to true so your assets and files will be compressed using the

gzip compression algorithm in the browser and then the last property is this history API fallback this option we

need to set it to True like this so after you do this now

there we if I execute this command now npm run build sorry npm run Dev so it

will actually start this development server npm run def

so now it will start a development local development

server on Local Host 3000 if you see that it will automatically open it and

now your application is there so the thing about this server is that you can make any sort of changes let's suppose

if you want to change the background color if you want to change it to a different

color let me change this color so what you will find it will automatically

reload you can see that the application changes you can even change the JavaScript code as well let's suppose

the main JavaScript code so if I add a alert statement right

here so if I make this change you can see I'm not reloading the page automatically it execute this this is

meant by the development server which webpack offers you need to configure

like this and now the next uh dependency I will show you if I want to actually

generate retain the original name of this file joke SVG because it has been replaced by a random name so if you want

to retain the same name there is a option right here inside your webpack config JS file so what you need to do

write here in the module in the type

parameter I think here you need to configure this option yeah in the output

object right here they need to add another property which is asset module file name so here you're

defining whatever is the file name which is given which is name

extension just the name and extension that's all so now if you execute the same

command npm run buil your original file will be retained

so now you can see that the original file name is retained so this way actually your images you will actually

know which image is this because it will not be replaced by a random name so

again if I open this the functionality Remains the Same so whatever is your

code is executed and now we will actually come to the application uh we will simply be using xos we will simply

Define a let's suppose another file right here

you can have multiple files in your project as well so you can have generate joke dogs what what this file will do it

will actually make a simple AOS

request let me copy this and paste it so you can see we have defined a simple

function generate joke which actually makes a simple call to the rest API and

it actually binds it manipulates the inner HTML of the actual joke element in

the HTML by response. data. joke and also we are importing the low Dash Li as

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

main file we simply need to use the import

statement so that we can import this you can

import generate joke from this module by

the using the import statement and then we will simply be executing this generate joke function that's

all I will delete this hello alert statement so once again if you

now build your project npm run built

so now you can see all your assets all your JavaScript SAS has been

compiled and now if you try to open this you will now see if you hit this

button but okay okay I do need to attach this to the button as

well so what we will do go to the

index.js so when we open the application this function will execute but also when

we click the button as well so we need to get the button

reference joke button so when we click this button you will execute this method as

well so once again do this npm run build

so now if you try to open this click this button so now you will

see as I click the button random joke is generated and it is fetched from the API

and displayed it so if you see the console as well the low Dash code is also executed the exos is also executed

this is actually the setup for web pack so if you're developing any project using webpack you can develop react view

any front end framework this is Ultimate setup you do you just need to do it once

so you can just make a GitHub repo and then you can clone it anytime whenever

you are developing a front-end project so this makes it really easy for using

any third party modules and then compiling it to a single page application which you can deploy it in

any any hosting plan so the last thing that I want to show you it also comes with the bundle

analyzer so if you actually build your application if you want to check out which dependency is taking which space

so there is a specific dependency which is there inside webpack so another we can install it as a depth dependency

which is webpack bundle

analyzer so simply install this so the configuration is really

simple just open your webpack config JS file and write at the bottom side

we can include this just after it is ending right here in the plugin section

this is also a plugin so new bundle so we do need to import this

plugin right at the

top bundle analyzer and uh it contains a function which is

bundle analyzer plug-in so after you do this we can simply make a new reference

of this new new Constructor new bundle analyzer plugin just put a semi

parenthesis so now if you do this uh npm run built so what it will do

it will also open a new port for the bundle analyzer so here you can check which

modules it's taking which space so low Dash is actually taking the most of the space and then which is index CHS plus

52 modules concatenated into a single file so this is actually the overall

structure of your project and uh this is really useful whenever you're developing a large project you will be able to see

which modules are the most of the space so that was the ultimate tutorial guys of using webpack in any setup in vs

code so thank you for watching this video and I will be seeing you in the

next video