everyone this is cold welcome to my web
pack YouTube mini course thing there's a
couple things I have to get out of the
way first
the most important one is that there is
a github repo that goes along with this
course so if you follow along if you
want to see the code I mean I do type
every line from scratch so it is a true
code along but if you just want to check
the code out at any point use this repo
view it in the browser there's a bunch
of commits with nice detailed messages
clone it down if you'd like to use git
if you feel comfortable checking out
each commit and I'll reference
throughout the video you know I'm on
commit 7 going to commit 8 and that sort
of thing
ok the next most important thing I know
everyone's gonna ask why am i wearing a
hat I need a haircut
ok and I thought this was better than
the alternative you see what I'm working
with here yeah okay so on to the course
content this video is about web pack in
general so if you already know how web
pack works what it does what the point
is then you might want to skip this or
just fast-forward through it in the next
video we start with installation so
because it is 10 videos I did decide to
spread things out instead of just
rushing through everything so I will not
take offense if you speed through any
videos or skip them that's what the
github repo is for as well if I were
taking this course I'd probably just
start by looking at the code I've always
liked to do that before I watch any
videos ok so let's get going let's talk
about what web pack is this is the web
pack homepage and I like how this image
explains it web pack can be very
confusing and intimidating and cause
many headaches when you're actually
setting it up and configuring it but its
mission its core goal is very
straightforward it takes a bunch of
different assets different files of
different types javascript images like
SVG P&G JPEGs CSS stylesheets or less or
sass all sorts of different files and it
combines them down it bundles them into
a smaller group of files one file maybe
or one file for your JavaScript one for
your CSS one for your third-party
JavaScript to vendor j/s and one for
your app code app jeaious it's very
configurable which is where it can
become a little tedious and pretty
intimidating to people who are learning
it but the idea behind it is very simple
so in addition to just bundling things
together and just shoving them into a
file it's also managing dependencies
it's making sure that code that needs to
load first
is loading first so if you write a file
that depends on three other files those
three need to be included first so often
it's a very complex web of dependencies
and larger apps and it would be very
difficult to manage it on your own web
pack does it for you and it spits out
one or two or however many files you
tell it to bundle and I like how the
github repo explains it web pack is a
bundler for JavaScript and Friends packs
many modules into a few bundled assets
and through something called loaders
which we'll talk about modules can be
commonjs es6 CSS images json
CoffeeScript blah blah blah blah blah
the list goes on so we're going to see
how to do a lot of this stuff but first
I want to show you an example of an app
that is already built we'll be creating
our own from scratch and configuring web
pack but this app is substantially more
complicated way more dependencies than
what we'll be doing in this course so
this is an app that I'm building for my
upcoming react course it's a a color
pickers website so there's a bunch of
color pickers you can click on one you
know you can copy a color there's a
whole bunch of features things like
changing from hex to RGB to RGB a all of
that involves a library that helps
figure out colors and and convert
between different color types I'm using
a library to get these nice sliders and
this little snack bar thing that pops up
down there
there's transitions I'm using the react
router Rose my point is there's a lot of
different stuff going on that is
third-party code that I'm depending on
there's some code to help with
drag-and-drop there's code for a color
picker so I can create new palettes
reorder them I save it and there's code
in addition for this emoji picker here
so I can select an emoji anyway that's
enough with the app itself but it's
sufficiently complicated where I think
it makes sense as a good example for web
pack so if we take a look at the code
there are I don't know 20 something
JavaScript components or react
components that I've written plus 20
something CSS files plus a whole bunch
of dependencies lots of modules things
that I'm using like react color I'm
using this emoji Mart I'm using material
UI react of course some form validator
libraries there's a lot of dependencies
and this is for a single file and
there's twenty-something of them so at
the end of the day
each one of them has at least this many
dependencies and it's very tricky to
determine what needs to load first if I
was manually including script tags for
each one of these 20 files
it would not be sustainable so this is
built on top of create react app which
is a pretty standard way of creating new
react apps and it uses web pack behind
the scenes in addition to some other
things but web pack is really
responsible for the bulk of the
functionality behind create react app so
it's going to take all of my JavaScript
and combine it into one file it takes
all of my CSS and combines it into one
file it does a lot more involving things
like babel for example but at its core
that's what it's doing it's bundling my
assets and making sure that it's
managing the dependencies so if I wanted
to run the application I can run NPM
start which will run it in dev mode
which starts a local server but it still
uses web pack and if I open up the
chrome inspector you can see in sources
there are MC just a couple JavaScript
files bundle J s and then main chunk J s
and this contains all of my code
combined into one file there's some
weird stuff going on if you're trying to
read it using eval basically each one of
these is a single file that I wrote a
massive string and it's being wrapped in
a web pack module and this is keeping
track of what it exports and what it
depends on and you can actually see for
example this is mini pallet J s okay
that's one of the components and if I
keep scrolling over you can see things
like this web pack imported module 6
equals web pack require of react so web
pack require is how web pack is keeping
track of what is imported where what
needs to be exported what uses what
basically manages dependencies so it
replaces my imports and exports with
these web pack requires so if I kept
going it's pretty annoying to scroll but
you'd see ok web pack required mini
colorbox that's another component that
this component imports it relies on that
component and what might surprise you to
learn is that it's actually importing
all of my CSS as well into this file so
it didn't make me a separate CSS file
because I'm running in development mode
and I'll show you just a moment what it
does in production and now if I instead
decide to run this in production which
I'm not really going to run it I'm going
to export I'm going to spit out a build
folder so npm run build this is a
command with create react app you'll see
that it makes me a couple of files once
it finishes it can take a while which is
why we don't export these CSS files in
development when we're constantly
changing things because it takes forever
to recompile it to reap undal okay so
that's just finished and if we start by
going to my text editor scrolling way up
close this down here there's now a build
directory and inside of that build if we
look at our Java Script there's a couple
files there's these source Maps we can
ignore but they're all minified now this
is the same stuff i was looking at
earlier when I was using the dev version
but now it's been all crammed together
and minified and I have separate CSS
files but if we look at them they're all
of my CSS separate files have been
combined into one and also minified so
web pack is doing all of this for us
again it's managing dependencies it's
bundling code together and now if we
look at index.html which is somewhere in
here there's only what to script tags at
the bottom and one or two link tags at
the top instead of 20 or 30 or 50
separate script tags that I would have
to do manually okay so hopefully that
makes it clear what web pack does why
you would want to use it it's a huge
headache on large apps to try and do
something without web pack or something
comparable alright so I mentioned this
in the intro video but I want to bring
it back up in case you missed it or you
skipped right to this video so you could
start installing stuff which I get by
the way but I want to bring it up
because this repo is very important for
the rest of this course the next 9 or so
videos it includes all of the code and
all of the commits that I make in all of
those videos so the link is in the
description it includes detailed commit
messages I'll talk about in each video
which commit I'm currently on so I do
type everything from scratch it is true
code along but if you want to reference
the changes I'm making or if you get
lost or you just want to look at it
without the video click on a commit and
you can see the diff you can also see
the notes I've written up top and if
you're more comfortable with it then
and just check out each commit as you go
all right so this is the initial state
of our application a very very simple
app that we're going to add web pack
into and configure it a couple different
ways and you'll see it gets surprisingly
complicated just to do a couple of the
basic things now that's not a dig at web
pack it's just maybe a bit of damage
control on my end just to let you know
that this stuff it can be annoying or
difficult to follow which is why I gave
you the github repo so that you don't
have to type everything yourself if you
want you can follow along that way but
you can also just you know check out
each commit as I go and you'll be able
to see what's happening
so the code right now is the initial
commit there is no web pack it's a
single index.html a single app j/s file
and an SVG image so you can see here's
our HTML there's a single script tag at
the bottom fjs has 40-something lines
imagine that it's 4,400 lines instead of
40 and that will help make it clear why
web pack really makes your life easier
once you get it set up at least okay we
also have some content of course and
then I'm using bootstrap from a CDN so
unchanged eventually we'll actually be
using local bootstrap we'll be writing
some sass to override different
variables change colors in bootstrap and
then use webpack to bundle it all
together and make it work but for now
it's coming straight from a bootstrap
CDN unchanged and this is what the app
looks like when I just open the
index.html I'm warning you it's
extremely simple and not exciting we
have two inputs styled with bootstrap I
can add numbers together by clicking
only adding unfortunately and it prints
out your result down here so some simple
JavaScript and some extremely simple
validation if I put numbers I mean
letters in here instead of numbers I get
this alert styled by bootstrap that says
please enter two valid numbers a ASD is
not a number blah-blah-blah-blah-blah is
not a number so it's actually really
horrible validation because you can
cheat it as long as you have a number in
that string so this is going to be one
plus 12 which gives me 13 even though
those aren't valid numbers but that's
not really the point
the content of the code doesn't really
matter much it's more about just having
javascript that we break up having some
sass having some CSS having an image
that's what really matters
so don't get too hung up on that because
the same stuff I'm going to show you
will apply to more exciting more
complicated applications but I wanted to
make something simple enough to follow
along with okay so the first thing I'm
going to do is break my code up into
separate files so that will take us into
commit to if you're following along that
will be the second commit so there's a
couple things that I can break up from
my app j/s first of all we have these
different functions I'm going to put
those in their own file each one in its
own file in a utilities or utils
directory because we might want to use
those somewhere else in the app in
checking if inputs are valid checking or
parsing inputs that's functionality we
could use somewhere else also you know
we're just breaking it up so that we
have something to bundle it's not very
fun to bundle a single file I'm going to
make actually I'm going to refactor our
code to have two services an alert
service and a component service and then
I'm going to have a function called run
that actually starts all of our code so
I'm going to do that now I'm going to
make a new folder inside of source
called app and then inside of that
another new folder called utils and then
the first utility will be parse - input
CAS and I'm just gonna cut this code
right there and put it in this file and
then I'm gonna do the same thing for our
second utility function which is called
inputs - R - valid is and I'm going to
cut this out and paste it in right here
there we go and I'll fast-forward
through some of these changes but I'm
going to make a couple more files just
so you can see the file names in the app
I'm gonna have alert service is I'm
going to have a component dot service J
s and then I'm actually going to move my
app j s into app so I'm going to delete
this when I'm done okay so I'm going to
fill out these files again it's the
second commit if you want to see how I
broke the code up for yourself okay so
I'm back this is the alert service a
class called alert service I just moved
the code into this it relies on inputs
are valid for example we also have
component service which doesn't have any
dependencies so far and then inside of
app J s the real the new FJ s I'm going
to delete the old one that's outside of
my folder now it's just all in this app
folder so I have my utilities two
functions and then I have alert service
component service and then app J s is
going to instantiate new instances of
alert service and component service call
them alert service and component service
and then it has a function called Run
which accepts an instance of alert
service and component service and I'm
calling that at the bottom so this is
what actually starts the app everything
else is just a function definition or a
class definition but this function run
is what actually runs the code what
starts everything so don't get too hung
up on the code it's not really the focus
all that matters that is that we have
code spread across different files so
now my index dot HTML needs to change
because I'm linking to the old app J s
but now it's inside of the app directory
so source / app / FK s that should get
me that file but you probably can tell
already this is going to be problematic
if I try and run it refresh the page
there's an error alert service is not
defined okay so this is sort of a
heavy-handed way of proving a point that
managing dependencies is tricky it's not
so bad in this example but we have alert
service we need to make sure that that
has loaded first we need to use
component service before we can run this
code so app J s depends on those two but
then we have alert service which itself
uses inputs are valid so we need to make
sure that it's aware of inputs are valid
right now all that we're actually
including is a single script for app J s
we have to manually include every other
file so I'm gonna do that now I'll fast
forward okay so I now have all of those
scripts but once again I need to change
the order because some of them depend on
one another so app J s I'll just put
that at the bottom because it depends on
everything else
loading first and now are we good to go
let's see okay it's working so that's a
very simple example but if we have a
thousand dependencies or a thousand file
and each one has ten different
dependencies or something like this from
the previous video this react app that
has 20 something react components each
one has a bunch of dependencies at the
top here's a different component a whole
bunch of other dependencies so if we're
trying to manage this ourself it's a
nightmare
which one loads first instead we use
webpack okay so we're not using webpack
right now we're doing it manually and
the point is that it sucks
so we're now going to install web pack
so this is the end of commit - right now
if you're following along commit 3
includes installing web pack and getting
it up and running so that is what I'm
gonna do right now ok so to install web
pack the first thing we need to do is
actually set up our package JSON so I'm
gonna do an NPM in it I'll do - why just
to make it faster it doesn't ask me all
those questions now I have my package
JSON and I'm gonna begin by adding to my
kit ignore the node modules directory
just so that I'm not committing that you
don't have to do that of course and then
in my package JSON where'd you go I'm
going to get rid of this scripts for now
we'll be adding our own script in just a
moment so we've got name code that's
fine I'm gonna set private to be true
again doesn't impact anything as far as
web pack but it just prevents it from
being published on NPM okay now what I'm
going to do is install web pack so NPM
install - - save dev web pack and if I
just did this it would actually prompt
me to install a second package which is
called web pack - CLI the command-line
interface and we want that as well we
want both of them so this sometimes
takes a little bit so I'll be back once
it finishes okay so that wrapped up now
we have both of those dependencies in
our package JSON next we're going to set
up a script inside of this scripts
portion the scripts property of our
package sell JSON and we'll go with
start so when we run NPM start from the
terminal it's going to call web pack
just like that that's actually all we
have to do for now well we'll change
this we're going to configure web pack
but out of the box this will work and we
can actually give it a shot right now
well we're gonna run into a few problems
so before we configure webpack we will
be configuring it and telling it all
sorts of different things that how it
should work how it should handle certain
files where it should put certain files
how many it should bundle when it should
name them
bla bla bla bla bla but by default when
you install it and you don't configure
anything you don't have a configuration
file it has a couple of default values
and we can actually see one of them if I
just do NPM start right now it's going
to call webpack you can see right there
where are you web pack but if you look
at the error it's telling me it can't
resolve dot slash source so it's
actually not the most clear error but
what it's saying is it can't find index
j/s inside of the source directory the
default entry point that it's looking
for what it's craving is an index
jeaious file instead of source and the
reason it says dot slash source instead
of slash index afterwards is because
when you require an entire directory and
node the index J s is what is used by
default so it's not finding it so it's
not happy so let's make an index J s
inside of our source folder index is
this is where it's going to look let's
add an alert hello from webpack well
save now let's see what happens when I
run NPM start once again by default we
didn't configure it it's looking for
that file so we made it
now it's also saying something about a
main j/s it built our code into main
jeaious ok and there's also a warning
down here
we didn't set the mode option so it
falls back to production we'll talk
about that later in this little mini
course so if we look there's a new
folder I did not make this folder
manually
it's called dist and there's a file
called mange s and it contains a lot of
random stuff that's not random I hate
when people misuse the word random even
though I just did that it's not at all
random it's very important web pack
magic at the top and then you can see
buried in there is our code now it's
actually wrapped in some some braces and
parens and curly braces
that's because web pack isn't just
adding our code as just I don't know
regular
code to the end of the file it's not
just appending it down here it's
wrapping it with some webpack magic and
in the next video we'll actually take a
look at it and understand what it's well
try and understand what it's doing but
for now it's good enough to see that our
code is in here so it has nothing to do
with the rest of our app it has nothing
to do with these component services with
the logic of that little calculator it's
not even loading right now so let's fix
that let's go into our index.html and at
the very end include another script this
one instead of app slash a pas it's
going to be dot slash dist slash main
dot J s this is the file web pack spit
out for us this is what I just built
it's very simple
it took one file in I had a single line
and it spit it out with a whole bunch of
other lines but that's all the web pack
magic I was talking about we'll come
back to it later so now if I go back
refresh we're getting this hello from
web pack that alert is working so seems
the reason that if we put other code in
here it would work and that's just what
we're going to do we're going to put our
code from the app in this file that's
actually coming up next because it's not
as simple as just you know copying and
pasting it because we want to keep it
across the different files so we're
going to use es6 import and export to do
that for us
and then web pack we'll build this one
file but the other thing we're going to
do in the next video is configure web
pack set up a basic configuration file
right now it's looking for index J s and
it's spitting out the code in dist main
j s we didn't tell it to do that so it's
it's rampaging on its own we're gonna
try and rein it in and tell it exactly
how we want it to work the last thing I
should mention I'm going to add the dist
directory into my kit ignore because
just like node modules both of these
directories don't need to be included
when I push this up to github they just
take up space and you can derive both of
them from the code you run npm install
you get node modules if you run NPM
start web pack will build the dist
directory with the main J s so I'm not
going to include it with git
alright so we're now at the end of the
third commit if you're following along
the next commit that we'll do in the
next video has to do with
webpack all about our app code and
configuring it so right now our app is
existing in a vacuum webpack doesn't
know about it we have web pack up and
running but it's only bundling this code
right here what we want to do instead is
call some code in here that is from our
application and we have these five
different application files inputs are
valid parts and foot's and so on and
we're going to call some code from this
file so when I bundle this file with NPM
start it's gonna go grab all the
relevant dependencies and put them all
into a file which ideally is going to
put all of these five files together for
us but first we have to declare which
files depend on what and the way we do
that is by using es6 imports and exports
so in each file we're going to indicate
what will be exported from this file as
well as making sure to import any
relevant dependencies for example if we
look at this one alert service it
depends on inputs are valid so we're
going to make that clear we're going to
import inputs are valid but we actually
can't do that yet because we haven't
exported anything from that file so if
we look at that here it is just a single
function I'm going to export inputs are
valid and then inside of my alert
service I can now import it imports and
I didn't export defaults so I need to
use the exact name here instead of curly
braces inputs are valid from and then
the path to that file from alert service
is dot slash utils slash inputs are
valid and then while I'm here I might as
well export alert service because we're
using that instead of our app j s you
can see right here I will need to import
alert service but let me just begin by
exporting the other thing so we've got
component service it doesn't have any
dependencies in here as far as I can
tell we have inputs are valid we're done
with that we exported it we have what's
the other one parse inputs we will
export that and where are we using parts
inputs I think it's in app you can see
right here
we rely on parts inputs and inputs are
valid so I'm going to copy this line
from Alert service and move this into FJ
to the top and we also rely on parse
inputs from dot slash utils slash parse
inputs okay and then we have alert
service and component service that we're
using in here but I'm going to hold off
on doing that for just a moment because
we have to talk about what is going in
our index J s right this is our entry
point this is where webpack is going to
start we need to run some code from here
that will then send webpack sniffing
down through all the files to figure out
the dependencies to figure out what code
needs to be bundled so we need to have a
little window into our application code
and the most logical choice would be to
run this function to call this function
from inside of index this is the
function that starts everything so
instead of calling it inside of our app
J s I'm going to delete that so I export
it out of this file so now inside of my
index J s I can import run from and then
the path to that file from index J s is
dot slash o not in the right spot dot
slash app slash app is the name of the
file and then I can call run but that's
not the end of the story because if we
look at what run is using we need to
pass in an instance of the alert service
and an instance of the component service
so I'm going to cut that out and move it
over to index J s but that's not enough
I can pass in a large service and I can
pass in component service but we still
have to import them here just like in
every other file where we're using
something this is a bad example
component service another bad example
let's look at alert service we need to
import inputs are valid because we're
using it in this file same thing here if
we're trying to instantiate a new alert
service we need to make sure make it
very clear we need it this is going to
tell webpack all right we need to make
sure alert service has loaded before we
can actually create one and pass it into
run so import alert service from dot
slash what are we we're inside of index
J yes so app slash alert dot service and
then I'll duplicate this and this other
one is component service from app slash
compose
servus okay now we should be okay we'll
double-check we're importing everything
we need so importing run alert service
and component service then were calling
run with the new instances of alert
service a component service app j/s now
just has this run function but it also
relies on inputs are valid and parse
inputs as you can see we're using it in
here inputs are valid parse inputs they
have no imports they only export a
single function and then we have
component service it doesn't import
anything but it does export and lastly
alert service we export it and it relies
on inputs or valid okay so let's see
what happens now when we actually run
NPM start
we now have code we have an entry point
into our application it's not just an
alert and webpack is going to go and I
keep saying sniff I don't know why I
have that idea in my head but it's gonna
burrow down and and start looking in
here and look at what app depends on for
run and it's gonna realize this depends
on inputs are valid and parse inputs and
then it's gonna check those do they have
any imports do they export something and
it's gonna keep going and essentially
form a tree for us so let's see what
happens when I run NPM start hopefully I
don't have any typos okay now let's look
at what it built for us in the disk
directory mange is now we can see all of
our code is down here shortly
well address what all this is but all of
our code is here it's not just a single
alert anymore and we have our script
included as you can see this slash mange
is the true test will be if we can
remove all of these scripts that were
there before and just have this one
main.js file and have everything work
still so let's see I'm going to refresh
the page it looks like it's working okay
looks good and if we go to our sources
tab what we can see instead of our dist
there's a mange a s it's minified it's
hard to read and understand we will talk
about that but it's working all of our
code is loading it's being bundled into
a single file so it doesn't matter you
know which order we're writing these
files in we don't have to indicate you
know this file must load first and this
one must load second we
just indicate this file depends on this
and this and then webpack takes care of
the rest it makes sure that everything
is loaded in a valid order okay so I
just committed the code again if you're
following along everything I just did is
in the fourth commit just show you the
git log so far right here web pack now
bundling all our code that's what we
just set up so we still haven't
configured web pack to do anything
beyond the default configuration that's
coming up next but it's at least running
all of our code it's bundling it all
together making sure everything is in
the correct order or making sure that
the dependencies are managed nicely and
then we include a single script tag and
all of our code works so this would
apply instead of four files where we
have 40 lines of code the same idea
applies where we have 100 files with 50
or 100 lines each as long as we write
explicitly what each file depends on and
what it exports ok next we're going to
configure web pack we got to set up our
own configuration file and we'll dive
into what's actually happening in this
main J's file I'm now working on the
fifth commit in our application if
you're following along with git and what
we're gonna do in this video is
configure web pack or at least set up
the config file and replicate what it's
already doing but we're gonna add a
couple of other settings to change the
output so we're gonna begin by just
talking about what it's doing for us
right now
so we've already seen this the default
place it's looking for an entry point is
index j SN stead of source I didn't tell
it to do that the only thing I told it
to do is just run web pack when I run
NPM start it just says all right web
pack do your thing web pack says oh
there's no config I'm gonna look for
index J s instead of source we didn't
have it there a couple videos ago and it
gave us an error and the other thing
it's doing is it's putting the code in a
directory called dist in a main J's file
I didn't say it should do that either
that's the default behavior so if we
want to change that or in our case if we
want to add on other things like we're
going to talk about plugins and loaders
throughout the rest of the course we
have to have a config file to do that
eventually we'll actually have one
config file for development one for
production but I'm just going to make a
file I can call this whatever I want
I'm gonna call it webpack config is and
then there's a couple of weird things
that we have to get out of the way
the syntax for these files looks like
this so we're going to export an object
and it's going to have a couple of
properties we're going to add an entry
point which I'll leave as an empty
string for now we're going to have an
output which will be an object and we'll
start with these two
so our entry point if we're just
recreating what we already have its dot
slash source slash index J s so not
doing anything new for us but we're
explicitly telling it to do this now
because it will allow us to in addition
add some other functionality down here
which we don't have right now now where
do we want it to output it well the
first thing that we can configure is the
file name not fill name file name if we
wanted we can keep it as maing is we
could go with I don't know hello J s
just to show you that it works and then
the trickiest part is we have to tell it
where to go where to actually spit that
code out and to do it we're going to
import a module from node that we get we
don't have to install this it's just
comes with node it's called path Const
path equals require path and what we do
is write path dot resolve double
underscore Deere name directory name and
then the name of the folder that we want
the code to go in so in my case I'll do
dist but to show you you may not want to
type this because you're going to make
an extra directory but just to prove my
point I'll just call this code like that
oh and I'm missing my equal sign up here
okay no wonder my editor was yelling at
me so we have file name hello J s path
is path dot resolved so what is this all
doing what is path dot resolved well
what this is going to do is resolve an
absolute path to this code directory so
it's going to take whatever the current
directory is so if I'm running this on
my machine this path will be something
like slash Colts or I think I'm actually
using a different account called
recording user slash document slash
wherever all my stuff is slash code
but then if someone else is running it
on their machine we don't want to put
this recording user hard-coded
hard-coded in there as the path for the
output so we can use passed-out resolve
which will take the current directory
name dear name which every node script
has automatically loaded by default
anyway this is just a long way of saying
we want to make a file called hello J s
inside of a file or a directory called
code so the last step if we want to use
this configuration is to tell web pack
to use it so right here in our package
JSON we can pass it pass in - - config
and then the name of the file web pack
dot config dot J yes okay so I mentioned
you may not want to actually run this if
you don't have this set up as dist and
main j s because it's gonna make you a
new folder and a new file and I'm just
going to delete mine right after but let
me show you that it works fingers
crossed that it does work let's see what
happens all right we have a new folder
and file called hello J yes so that is
coming from web pack it's not doing
anything with dist anymore we could
delete that but instead I'm gonna delete
my code directory so let's do that now
RM dash RF code ok that file is gone I'm
going to change this back to main J s
and change this to be dist and that's
what most people will do or you could
have the folder called V call build
instead but there's a lot of options but
code is probably not the best example so
the next thing we can do just to show
you why you would even do this if we're
just recreating what we already had why
go through this effort well we're gonna
spend a lot of time heading in different
plugins and loaders and having web pack
handle different types of files but for
now remember how I said all of this is
minified and ugly and hard to understand
what's happening is that it's running in
production mode by default and I can
tell it let's not do production let's
set mode to be development and that mode
is going to tell it to stop minifying so
now if I rerun my code or if I rerun web
pack inside of dist we have a mange is
and it's no longer all scrunched up into
this really hard to read thing of
now usually you're not gonna read this
anyway that's not the point
you read your code in the files where
you're writing it but then webpack spits
out a bundle but just to show you what
it looks like you can see all of it here
now one thing that's kind of annoying I
don't know if you can see this it's
using eval all over the place this is
another thing that it's being configured
by webpack automatically if we want to
change that it's not really a
performance issue but just for
understanding what's going on we can add
another thing called dev tool and if we
set dev tool to none and I always forget
it's a lowercase T if I rerun it this
time again this is not something you
need to do but if I look at the code now
you can see that all of our code is in
here relatively unchanged we don't have
that weird eval stuff going on so this
allows us to actually understand what
this file is doing so the very top of it
is some webpack stuff that has to do
with defining different functions to
make a web pack module there's one
called web pack require so if we look at
the code that's added in further down
for example if we look at alert service
let's look at the file alert service has
this class as we've seen in an exports
that class but it also imports inputs
are valid but let's look at what web
pack put in the file if we go to our now
I guess I closed it our mange is we can
see that it says exports provided alert
service and it wraps the entire thing in
this function to create a web pack
module all of this right here it ends
right there but then inside of it we
don't actually have our import anymore I
don't see that line that we had at the
top of alert service that said import
inputs are valid this is gone and it's
been replaced instead with some web pack
magic where we have web pack require see
right here web pack require source app
utils inputs are valid so web pack is
now taking control and this web pack
require is making sure that our code is
all loaded in the correct order it's
managing what depends on what so it's
basically using this as a hook seeing
this here
and realizing and what's not realizing
something but it has logic that is
making sure that it's doing its own
webpack version of requiring that module
so if we keep scrolling down we can see
you know for other things like app J s
FJ s depends on parse inputs so it's
requiring it with webpack require and
inputs are valid webpack require and we
can keep going and you'll see that all
of our code is in here it's been added
in and slightly modified to use webpack
require to be wrapped inside of a
webpack module and a lot of that or all
of that logic is coming from here okay
so I'm gonna go and undo or delete the
dev tool none we'll come back to that
later we'll talk about source Maps but
I'm going to leave mode at development
for now so we're gonna end here actually
we haven't really configured very much
we've just seen how to recreate what we
were getting already although we did add
in mode development but in the next
video that's all going to change because
we're gonna start talking about loaders
how do we handle different types of
files that aren't just JavaScript so
that's coming up next we're gonna have
to edit our config file so I'm going to
commit right now if you want to just see
this code it is the fifth commit so
we've seen how to take different
JavaScript files and bundle them
together with web pack it's pretty
simple it's the default behavior of web
pack we just tell it here's where you
should start now just go grab all of the
code that's it's somehow related to this
index file so go grab run and then it's
dependencies and so on but that's just
JavaScript but we started out a couple
of videos ago talking about how web pack
can bundle all sorts of files images and
other static files things like JSON sass
CSS SVG's there's a ton of stuff we can
do in this video I'm going to show you
how we actually do that we have to
install some packages we have to modify
our web pack config and we have to talk
about loaders so loaders are the magic
or the key for getting web pack to
handle different types of files
besides JavaScript so they are different
packages that we install and they
dictate how certain files should be pre
processed as you import them or as they
are loaded so you can transform files
and do different things based off of the
type of file or exam
we can handle a CSS file one way and we
can handle a SVG file another way so on
the web pack documentation there's a
list of some of the most popular loaders
you can see under styling where it's
that there's quite a few we'll talk
about what the difference is it seems
like style loader would work for CSS but
then there's CSS loader what do they do
how are they different we'll also talk
about getting sass to work towards the
end of this video as well and then this
is not just a complete list there is
another link that will take you to a
different web page that shows you a
whole bunch of other loaders that other
people have written so my point is that
loaders are really really useful it's
how we get web pack to handle to
pre-process different types of files so
we're gonna add some CSS into our
application we're gonna start really
simple I'm on commit 5 working towards
commit 6 if you're following along so
I'm gonna make instead of my source
directory a new file called main CSS so
remember a couple videos ago when I
showed you the large create react app
that had 30 or 20 different CSS files
and they're bundled together we could
have web pack do that for us but we're
gonna start simple with a single
selector we're gonna set the body
background color to be purple for now so
of course right now we're not going to
see anything because we're not including
this in our HTML file we could include
it as a script manually but the idea is
to go through web pack we could have 20
something files of CSS web pack should
undal them together and then somehow get
it to just work the somehow part is what
we'll talk about so we're going to need
to use two different loaders one is
called style loader one is called CSS
loader so we can begin if we come down
to styling we're going to begin with CSS
loader and before we go any further we
have to talk about how we actually set
up these loaders this is what we add
into our web pack config file so under
module which is an object we're going to
pass in rules which is an array and we
can put different rules for different
types of files for different modules so
we can say in this case if a file ends
with dot CSS if the name of the file
this is a regular expression if you're
not super familiar with regex this
dollar sign means that it has to end
with dot CSS so it can't have CSS just
in the middle of a file name there has
to be a period we have to escape it so
that's the backslash period CSS end of
string or end of name and then if that's
the case we will use these two loaders
so we're going to begin by installing
both of them and I'll tell you what the
difference is and why you need both in
just a moment but let's do our npm
install - - save dev style loader and
CSS loader okay while that's going I'm
gonna go back into my web pack config
and I'm going to update this to now have
module and then we have rules which is
an array and then we're just going to
add our first rule where we add tests
and remember this is a regular
expression and obviously we can just
copy this one for now just like this
okay and this says the file ends with
CSS if that's the case how do we want to
handle it and then we can pass in use
which is an array and I'm gonna start
with just CSS loader okay and I don't
know why I have this extra G down there
so we're saying anytime you come across
a CSS file use CSS loader which
hopefully installed it did now we have
to make sure our app knows about our web
pack knows about this main dot CSS file
so we're going to add it we're going to
import into our index J s so import and
we need main CSS so dot slash main dot
CSS so if I do this now web pack will
come across that CSS file and it should
match this regular expression and it
will use a CSS loader so let's see what
that does
NPM start okay let's go look at our main
J's file we're gonna have to do some
scrolling I'm going to search for purple
and you can see down at the very bottom
we have our main CSS and it's showing up
in this JavaScript file so what's
happening is that the CSS loader it
exists to take CSS and turn it into
valid JavaScript code basically turn it
into really long strings and make sure
it's
valid JavaScript you can see our
selector here body background purple but
it's not being applied right now at all
if I open up this page if i refresh
right here there's no purple background
even though that code is included so
that's where style loader comes in so
CSS loader takes your CSS and it turns
it into JavaScript and then style loader
will take that JavaScript which is
actually CSS and inject it into the Dom
you can see right here style loader adds
CSS to the Dom by injecting a style tag
okay so to use it it's really simple
we already installed it we go to our web
pet config the trickiest part is that
you have to know that there is an order
to this array so we have to use them in
the correct order this one is going to
translate CSS to JavaScript and then
style loader takes that JavaScript and
injects it into the Dom so we need to
make sure that this happens first we
have to translate the JavaScript before
we can inject so you might think we
would put style loader second they
actually load in reverse order so we
need to put style loader here and then
CSS loader so when it encounters a CSS
file it's going to start with CSS loader
translate it to JavaScript and then
injected via style loader so let's see
if it works now I'm going to build NPM
start let's go back check our mange is
do a search for purple okay it's still
here but now if we refresh the page it's
now purple so how is that working if we
look at our index.html as we've already
seen there is no link tag as far as our
purple body we only have this bootstrap
CDN but there's nothing that has to do
with our CSS that we wrote the way that
it's actually getting added here is
through that style loader it's being
injected if we look in the elements tab
in the head you can see that there has
been some style added we didn't do that
web pack did it for us
so that is our first little taste of
loaders I know it's confusing because
we're loading CSS without ever actually
connecting it to a link tag in a HTML
file
it's all happening through JavaScript so
if I wrote more code
in main dub CSS or if I had a bunch of
other CSS files and they were all
connected each one would be parsed and
turned into JavaScript and then injected
into the Dom now later in this course
we'll see how we can actually spit out a
separate CSS file so if you wanted to
have in your your dist folder you wanted
to have main dot CSS there are ways to
do that and we can minify it we can do
different things to the code but for now
we've set up our first loader so I'm
going to commit right now because I'm
actually going to change things to show
you how we could set this up to work
with cess s CSS files so first I'm going
to commit I'll be right back
okay so we're now moving on to the next
commit what we're going to incorporate
sass so if you're not really familiar
with sass it allows us to write what is
it syntactically awesome style sheets
it's the original what it stands for
si SS but now most people use as CSS
files it doesn't really matter but what
we're going to do is write some nice
sass that will override the default
bootstrap colors like for this button
right here we're never making that blue
it's coming from bootstrap to override
it we need to use sass so the first
thing I'm going to do is actually
install bootstrap locally so npm
install' - - save dev bootstrap so
that's just going to get me the copy of
bootstrap on my machine and then I'm
going to begin by in my index.html
removing this entirely so we have no
bootstrap right now we're not including
it if i refresh we just get our purple
color from that main CSS so now what I'm
going to do is change my main dot CSS a
bit and then delete this and I'm going
to rename it to dot s CSS now we could
have actually kept CSS and sass and I
thought about doing that to show you two
separate rules but it would be kind of
weird to have CSS and sass at the same
time because if you're already working
with sass most people would just prefer
to write sass because it's a lot it's
easier it gives you some nice features
that you don't have in regular CSS so if
you want to see how the CSS works on its
own like we did earlier you can just go
back to this commit but I'm about to
change things to use sass okay so in
here what I'm going to do now is
actually import bootstrap which is from
this node modules to
readjust installed it and the import
looks like this at import bootstrap /s
CSS slash bootstrap ok so right now
we're not overriding anything we're just
trying to get bootstrap to work again
but using sass this time so if you don't
know how sass works it's not valid CSS
on its own it has to be compiled or
turned into CSS so I can't just do this
I can't say ok when you find an S CSS
file any file that ends and dot s CSS
use style loader and CSS loader because
it's not CSS so this is going to cause a
problem but what we do is use another
loader if we go back to loaders here
under style go back a page there is a
SAS loader if we use less there's a less
loader stylist if you like stylus and so
what these will do is take in this case
takes s and turn it into regular CSS and
then we take that CSS turn it into
JavaScript then take that JavaScript and
inject it into the Dom so a three step
process now notice that they they
mentioned it it does rely on another
package called node sass so we're just
going to install all of them together
sass loader and node sass so let's do
that now npm install - - save dev sass
loader and then it depends on node sass
and while that's going I'm going to
update my config file to say s CSS I've
already done that and we need to make
sure that it's now using sass loader
remember the order matters this happens
first I'm gonna add some comments here
actually to make this a little easier to
understand so this happens first I'll do
one turns s CSS or sass into CSS and
then this step two turns CSS into
commonjs so it converts it to JavaScript
which is what we see in our file here
for example here is CSS but it's
actually valid JavaScript code then the
last step which is step three inject
styles into dom
okay so those are the three steps and we
should be good to go
assuming my install worked let's see
what happens so I'll save
and I need to update one thing forgot
we're importing main dot CSS here that
doesn't exist anymore now it is a s CSS
file a sass file let's see what happens
when I run NPM start moment of truth
okay we go to our main show yes and we
should see a whole bunch of stuff now
this is all the bootstrap code that we
imported it's turned from sass into CSS
from CSS and some JavaScript which is
what we see here and then it's injected
into the Dom if we refresh hey we're
back to our nice bootstrap now we
haven't actually overridden anything so
we're gonna do that next it's really
easy now we have all the sass setup we
can write sass wherever we want as long
as it's an S CSS file and we're
importing it somewhere I now can
override the primary color so this is a
primary button so the way we do that is
by writing not capitalized dollar sign
primary and then giving it a color like
teal for now so if we'll save and we
rebuild over here go back refresh the
page you can see that the default
primary color is no longer there we're
getting our own color and likewise this
error color right here is I believe
danger is the name of that color so if I
want to change it I would say at danger
what am i doing at dollar sign danger is
now going to be let's just make it
purple just to see what happens I have
to build again soon we'll get a dev
server setup so I don't have to keep
doing this
anytime I change something webpack will
know about it and it will reap undal for
me and there we go we're getting purple
now so we are successfully loading sass
through web pack it's such a it's sort
of a convoluted crazy idea but it's
really nice we only have one file but we
are including this bootstrap file too
but imagine we had 20 different files
they all get combined together they
start a sass they turn into just CSS
then CSS the JavaScript then JavaScript
inject it into the DOM and remember
there is no CSS file in our sources it's
all just index.html and mange is mange s
is adding the CSS in into the head
right here and you can see all of those
styles is really long because of
bootstrap so we will see how to get it
to spit out a standalone CSS file but
we're not there yet
so I'm going to commit again we're done
with this little section we saw our
first couple of loaders these allow us
to have webpack pre process certain
files in different ways we write a
regular expression we install the
loaders we say which order they should
run in and we just let it do its thing
that's what loaders are there for
alright moving on I'm going to commit
I'll see you in the next video so next
we're going to talk about a really
important feature of web pack which is
called cache busting it's how we can
prevent certain assets like our main
bundle J s or our CSS bundle once we
once we actually make a separate CSS
bundle whatever those files are how we
can prevent browsers from cashing them
when we don't want them to be cached so
I'm going to begin with a really quick
overview of caching so I'm on just a web
pack repo on github if I go to my
network tab and I do a hard refresh hard
refresh command shift are on a Mac
you'll see I'm just looking at CSS only
there are two CSS files and notice their
names they are quite long and ridiculous
in addition to that we have over here
let's see under size you can see the
size of the file now I'm going to do
another refresh but a regular refresh
not a hard one so these assets some of
them might be cached so I'm gonna
refresh without shift so no shift key
notice that this time it says from disk
cache so what this means is that it's
using the copy that it already had my
browser remembered this file it
remembered this file name and it decided
okay we already have that we're not
going to go get the new copy because
nothing has changed or we assume nothing
has changed it's the same name and
that's pretty simplified explanation but
this can cause problems if right now
we're using what mange is if every time
we write code and we bundle it it's
always called mange is then it could be
cached and someone's browser and we
could completely overhaul the
application code and we build it again
we push it up to our server it's running
and that person
request our website there browser might
say oh I already have mange a s and just
use that version so what we can do
instead is add in this crazy jumble of
numbers and letters which is called a
content hash into the file name and
what's special about that content hash
is that it is actually determined it's
based off of the content in the file
itself so if nothing changes in that
file we will end up let's just do a
simplified version ABC so right now my
code and mange s all of this code we run
it through this special hashing function
which is I believe it uses one called an
md5 a relatively or very famous hashing
function and we get ABC so next time we
build nothing has changed we still get
ABC but then I change one character or I
delete everything and rewrite all my
code I get a completely different hash
so that time it might be this instead
now they're much longer they're much
more complicated but that's the idea so
every time we change our code we get a
new file name but if we don't change the
code the file name stays the same so
that caching still works but we're
busting cache busting when we change
something in the code we get a new file
name so right now it's main dot j s
every time that's a problem all we have
to do is add in content hash like this
inside of brackets and usually you want
to do main dot content hash or vendor
dot you don't want to just do content
hash J yes and you'll see that's what
they do on github if we go back to
network refresh one more time
github - blah blah blah dot CSS
frameworks - so they use a - but it's
the same idea so we're going to
implement that now with content hash and
if I build right now it's going to take
the contents of this file after it
builds it and before it creates the new
file but take all this code it hashes it
using like I said I think it's md5 and
it gets this special hash that only
corresponds to the content in here and
then it sticks that in the file name so
let's see if it works
NPM start
we end up with content hash what file
doesn't make for us take a look
main dot 1 e da 8f
blah-blah-blah-blah-blah and if I run it
again without changing anything it
should be the same still and it is one
ETA so remember that one EDA now I'm
going to change something in my code I'm
going to add a console dot log to my
index J s console dot log hi so now the
code when we build main j s will be
different and that means that the
content hash will be different which
means the name is different so now we
have fa20 b15 blah blah blah so we are
getting these new file names anytime we
change the code but if we're not
changing it it stays the same so this is
really useful because if you have like
we felt later on we'll have a vendor J S
which will contain libraries things that
aren't going to change as much those
won't need to change they stay the same
so we can just catch them or the browser
can cache them but our application code
might change more often so then we get a
new file name each time which then when
it's requested from the browser it won't
be cached or it won't use a cached
version because it's a new file name it
hasn't seen before so that's all great
but we have a problem how are we going
to link how do we include that script or
index.html right now is including mange
is how are we going to dynamically
predict or what are we going to do we
can't just assume that it's going to be
this every time because it changes so
the answer is we don't write the script
ourselves we don't include this script
anymore we're gonna have web pack build
our HTML file for us and stick it in
this folder so it's going to
automatically come up with the correct
script name and put it at the bottom but
to do that we have to learn about
plugins so let's do it
alright so plugins according to the docs
give us the option to customize the web
pack build process in a variety of ways
very useful definition here so web pack
comes with a bunch of these different
plugins that they talk about on their
web page but there's also a whole bunch
of third-party plugins that you can find
here awesome web pack contains I don't
know a couple hundred of them so they do
all sorts of things we'll see a few more
throughout the course we'll find one
we'll use one that it's going to help us
minify our CSS and export CSS files
we'll see one right now which is the
HTML where are you HTML web pack plug-in
which will help create our HTML file for
us and we'll also see one that helps us
clean up our dist folder because spoiler
you might you might notice right now
it's getting clogged every time we run
start NPM start we're getting some times
we're getting new files if we changed
our code we get a whole new file and if
we use this clean web pack plug-in it
will help clean it up so plugins give us
additional functionality so let's talk
about the HTML web pack plug-in it
simplifies creation of HTML files this
is especially useful for bundles that
include a hash in the file name which
changes every compilation that sounds
like exactly what we need you can either
let the plug-in generate a file for you
or supply your own template so we'll do
both we're going to begin by just having
it make a file for us the first thing we
have to do is install it NPM install - -
save dev HTML web pack plugin so I'm
just going to copy that one move it over
here and paste it while that's going
let's look at how we use it so we
require it in our config file and then
there's something new we haven't seen
yet plugins this is something it's a
property we add to the object that we're
exporting just like entry or output and
plugins we pass in an array that
contains as many plugins as we want so
let's try it out so let's make sure we
are requiring it in our web pack config
at the top and then we can add in
plugins which is an array
don't forget your comma I always do that
and then I get an error when I try and
build and then we'll just pass in new
HTML web pack plugin so we're making a
new instance of it and for going safe so
we haven't configured anything let's see
what happens
I haven't told it what name I want the
file to be I haven't told it what should
go in that file
all I've said is use this HTML web pack
plug-in which is going to make me some
file let's see
let's run npm start hopefully no errors
okay
let's go back and look at our distal dur
something changed index.html it's very
simple very sparse it has a default
title I didn't tell it to call it web
pack app I didn't say it should be
indexed either we can change that if you
wanted to but I like index it's logical
and most importantly our script is
included automatically at the bottom so
whatever this content hash is every time
if I change it if I change those files
we'll end up with a new script now we
have another problem which is our
content is not in here so even though my
JavaScript is included if I open this
file right now which for the record is
not the same file I've been opening I've
been using this index where I hard-coded
in main j/s but that's changed now that
doesn't exist or mange is is not being
exported anymore so instead I need to
use this index.html I need to open this
file from my dist directory so I'll just
do it from the terminal I'll do open
dist slash index and we have a problem
there's no content on the page our
script is here as we saw or as I talked
about so that part is working but what
about our HTML content this is where we
need to tell it a template to use so
this line somewhere where is that you
can either let the plug-in generate an
HTML file for you supply your own
template or use your own loader so we're
going to do the most basic template
possible we're not going to use a
library we're not going to do like
handlebars or any other templating
language we're just going to do a plain
HTML file so I'm going to come over
wrong way here we go I'm going to make a
new file inside of my source directory
and I'll call this template dot HTML and
I'm going to go to my original index
copy the whole thing over into template
HTML but I'm going to delete things for
example we don't need this bootstrap
anymore
web pack is going to take care of that I
don't need this script tag web pack
takes care of that I'm going to leave
this SVG file we're going to
back to it in a second or a separate
video to address how we how does web
pack work with images but for now this
is our template so we're going to tell
this HTML plug-in we use this code from
this file put the script tag at the
bottom and make sure it's the correct
script tag whatever the content hash is
it needs to match so now all we have to
do is in our web pack config here where
we're using this plug-in we need to tell
it to use that template and we just pass
in an object and a property so template
and our template file is called template
is no dot HTML whoops and that is coming
from let's make sure we have this
correct so this is from the web pack
config file we're inside of source so we
need to do dot slash source slash
template dot HTML okay so it's going to
use this template template dot HTML take
this code put it into a new file which
is calling index dot HTML by default and
it's going to make sure to include our
script tag at the bottom using the
correct name the correct file name
depending on which bundle we just built
let's see if it works
NPM start fingers crossed
let's look at index ok so here's all of
our code all of the HTML we needed and
down at the very bottom we have a script
tag and it's using our bundle so every
time we build now if we change our code
we rebuild we get a new bundle we get a
new index file with a new script tag
let's try running it make sure we're
using the dist slash index dot HTML the
image is not working we'll come back to
that but our JavaScript is now loading
our HTML is here it looks good okay so
we saw a lot in this section we talked
about plugins in general this is not the
last plug-in we'll see but we actually
started by talking about content hashing
and cache busting how do we set up web
pack so that it uses that content hash
it's really simple as we saw in the file
name when it bundles and then that
enables us to bust caches if we change
something we get a new file name if we
don't change it it's the same file name
every time so the caching the cached
version is just fine if we don't change
it in addition this caused a problem
because
we need to dynamically link to this file
name it's changing so that's what this
plug-in does we give it a template and
it uses that it builds a file for us and
this is the file we are now using so
every time that we run NPM start it
makes this new file and we open this
file instead of this one we can actually
delete this one entirely I'm going to do
that right now
okay so I'm going to commit so if you
want to follow along committing now and
I'll see you back in the next video so
far we have one web pack config that
we're using every time we build and that
works great but often we want to have
some different functionality for
development versus production but at the
same time there's a lot of stuff that is
in common between the two so in this
video we're going to actually have three
config files one that is in common
that's shared between Devon production
and then one for dev and one for
production so we can add things in like
a development server a live updating
server that we can just run instead of
building the whole disk directory and
having to manually open it we can use a
web pack dev server on the other end of
things with production we might want to
minify we might want to export our CSS
into a separate file so we're gonna
basically set up the the framework for
us to do that in this video just to show
you what we're aiming for
this is that react app I showed you very
early on if I run NPM start it's not
actually building a new directory it's
not making a dist or a build directory
instead it's opening up a live server
you can see localhost 3000 my app is
working and if I change something it
updates automatically now if we go back
and I instead run npm run build this is
going to use production mode for web
pack and you'll see that we don't get a
live server it takes longer things are
being optimized and minimized and we end
up with an exported directory it's not
exported but we end up with a new
directory called build once it finishes
so if I do an LS you can see now there
is a directory called build CD build and
there's a couple of files no live server
but things are compressed there minified
and they're ready for production so
we're going to go for the same sort of
idea we're going to have
npm start start up a dev server in our
little mini app and then npm run build
will actually run it in production and
create the dist directory but first we
are going to make a couple of config
files so we have web web pack config i'm
going to make another file called web
pack dev is and one more which will be
web pack let's do prod PR OD is and i'm
gonna begin by just copying what we
already have into both of them and then
we can selectively delete things so for
example in production we want mode to be
production and entry point we can get
rid of because we'll keep that in the
common one which i'll rename this to be
common web pack commonjs
these names are up to us we're going to
pass them in when we actually run web
pack from our package.json script so web
pack common I'm going to keep entry
point I'm gonna get rid of mode I'm
gonna get rid of output because in my
dev version I don't want the content
hash in my production version I do it's
easier in dev to just not deal with the
hashing just have you know main CAS it's
not a big deal but we can at least set
up some differences so you can see it's
working so we can get rid of entry but
we'll do mange is over here we'll do
main content hash is in production what
else we can get rid of the plugins for
now from dev and from prod those will be
the same but we'll keep it in common we
can keep the s CSS loading eventually
will be minifying our sass and our CSS
in production and not in development so
this will leave the common file but for
now it can stay here so this is the
stuff that we have in common between the
two and then in dev I'm going to get rid
of all of these rules here and just keep
it like this mode development production
same thing so we'll be updating this as
we go but right now this isn't going to
work well it could work but we're not
going to merge them with common so if I
want dev to also include the
functionality from common
production to include the same
functionality from common I'm going to
use a package called webpack merge so
npm install' - - save dev web pack -
merge and this allows us to very easily
merge web pack config together so that
finished and I'm going to start by
exporting actually I don't need to do
that it's already module about exports
from web pack commonjs
now I'm going to require it here so
we'll call it common equals require and
then the path is dot slash web pack
common so that gives us the contents of
this file of common and then I'm going
to import merge Const Marg equals
require web pack merge we just installed
that web pack merge right there now what
I can do is set module dot exports to be
the function call of merge or I pass
common in and then this object you need
to make sure I add my closing / end on
there and what this will do is say merge
whatever is in common which is this with
what we have here in this object okay
and then I'm gonna just duplicate this
same thing
we don't need HTML web pack plug-in in
this file we're not using it we're using
it in the common file so I'm going to go
to production delete that and then I'm
just going to copy the same line here
right here and then add my paren at the
end alright so all we're doing is
changing mode and the output dev vs.
production looks good save both files
now we need to tell web pack which ones
to use
so in package JSON when we run NPM start
we're gonna make it config web pack dot
dev a s and then when we run build we'll
set it to be web pack dash dash config
web pack dot prod is and keep our
fingers crossed let's see if it works
so let's start with hmm let's do dev
first so NPM start NPM start moment of
truth it looks like it worked let's look
at our index
the new index.html you can see that the
script is just mange a s it's not main
dot blah blah blah ABC f-f-f-f-f-f-f
something like that je s and if we look
at the script its mange is it is not
minified because we set mode to
development now instead if i run npm run
build so not just npm built with npm run
build that's going to call web pack with
our production file with this config
file and let's look at our index you can
see if we now have the content hash and
if we look at the right file one seven
nine d right there it is minified ok so
this is just the beginning of setting up
development versus production and we
have it set up but there's a lot more
that we can do to differentiate this two
so the first thing I'm going to do is
set up a dev server a web pack dev
server so that when I'm in development I
don't have to keep building like this I
don't have to do n p.m. start every time
I want to see something and it's really
easy to do NPM install - - save dev web
pack dev server and this is actually not
something we really have to add into our
config file instead we're gonna go back
to our package JSON which is where are
you oh my guess I closed it down or I'm
blinded okay here it is instead of web
pack we're going to run web pack dev
server and then at the end we can
optionally pass in - - open it doesn't
have to be at the end but somewhere a
flag and what this will do is open up
the window in our browser for us so
let's see if it works when I run NPM
start we should now end up with the dev
server open and opening it
there we go it opened up automatically
for me I'm getting all my code here and
if I go and make a change let's say I
changed the color in my sass file
instead of teal let's go to magenta and
save you'll see it automatically
rebuilds and my browser refreshes it
updates and you can see that happened
over here well it's gonna be kind of
annoying to point out but you can see it
rebuilt again and the certain things
change to detect them essentially you'll
see a bunch of scrolling text if you
change something the other thing I want
to make clear about this if I actually
remove the dist folder so RM dash RF
dist
you don't have to do this but I'm going
to delete it now if I run NPM start
which is using the dev server here we go
we see our code let's tweak it back
again one more time let's go back to
teal save it updates automatically we'll
close out with ctrl C if I do LS if I do
LS if I use LS there is no dist folder
so it actually does everything in memory
it doesn't actually make a folder for
you when you run it with web pack dev
server which is nice we don't have to
keep you know deleting these files or
making these files and overwriting them
it's all in memory but then if I want to
spit it out npm run build this will give
me my production version where i can now
you know open it up manually or start
i'm gonna put it on a server somewhere
and you know use this as an application
so now i would need to open dist slash
index and it's working well aside from
the image which we haven't addressed yet
but our javascript is here yeah
everything looks good alright so that's
the end of this video I'm going to
commit right now if you're following
along I'm adding a bunch of detailed
notes to the commits by the way so if
you ever get lost you're not sure which
one I'm using
there's the main commit message and then
some bullet points below that explains
you know what we did all right so I'm
going to commit now and then I'll be
back with another video in this video
we're going to talk about two loaders
for web pack file loader and HTML loader
as well as a nice plugin called clean
web pack plugin so we're going to start
with the loaders right now we have this
image that isn't really working well
it's not working at all and actually the
reason it's not working right now is
because my path is incorrect originally
we had our index.html file right here on
this level and the file it the image is
assets slash web pack SVG so the path
was just dot slash assets slash web pack
SVG and I copied this whole thing into
my template but now my template is
inside of the source directory
so what I could do is just change it to
be dot dot slash assets as you can see
this should work if I rebuild one more
time my index dot HTML in the dist
folder is now linking to dot dot slash
assets so this does technically work but
this is really not a good way of doing
things for a couple reasons one is that
we are hard coding this path in and it
relies on assets being in a sort of a
sibling folder being in the same folder
as dist the dist folder is supposed to
just contained everything we need it's
supposed to be you know the the build of
our app it should have everything we
need contained in this folder so the
fact that our assets is on its own and
we just happen to link to it correctly
is not ideal so what we're going to do
is set it up so that my assets are
actually copied into this folder and
we'll work on hashing them for cache
busting so they'll have new names sort
of like our bundles down here and the
links are going to be dynamic the source
and our image will be dynamic so there's
a couple things we need to do the first
thing I'm going to do is move my assets
into source so source will have an
assets directory will reference it in
here webpack will then take those assets
copy them over to dist into a new folder
and then I'll link to them and it will
be sort of magic ok so I just moved the
assets folder and then the path now
needs to change in my template so my
template is in the same folder so it's
dot slash assets slash web pack SVG ok
so that works but then we're going to
have the problem when I run npm run
build and I open index it's looking for
dot slash assets but there is no assets
folder in dist
so we're back to our same error or issue
before so we're gonna do two things to
loaders to help us and the first one is
called HTML loader and I have the docs
open for it here on github what it will
do is replace well any time it
encounters a source for an image it will
require that image it will tell webpack
hey here's a file that we're getting we
need to load I need you to you know
figure out what to do with it and then
we'll have to tell web pack how to
handle those files like
had to do with a CSS file or an S CSS
file but instead we'll tell it how to
handle JPEGs and P and G's but we're
going to start with the HTML loader so
it's pretty straightforward npm install
- - save dev HTML loader and while
that's going in our web pack common
because this is common across all of it
we're going to add another rule or the
test will be for dot HTML at the end of
a file name and then we're going to use
HTML loader just like that we don't
really have to configure very much this
is fine on its own so what happens is
that we're using this template HTML it's
being required essentially web pack is
going to encounter this and because we
have this new loader we just added in
that says hey if it ends with HTML let
me take charge of it use HTML loader so
then that's going to come across this
source and it's going to require this
image in JavaScript and then web pack is
going to freak out because it doesn't
know what to do so I'm going to show you
that right now if I do npm run build
we're gonna get an error here we go so
what happens is it comes across this SVG
right here because it was imported and
it says I don't know what to do module
parse failed unexpected token you may
need an appropriate loader to handle
this file type and indeed we do so we're
requiring any images in our template now
they are being required imported into
JavaScript but now web pack doesn't know
how to handle them so this is where file
loader comes in so this will help us
actually load those SVG s or PNG s or
JPEGs so we're going to begin by
installing it so NPM install - - save
dev file loader and while that's going
we can add a new rule and this one the
test is going to be a bit different I'm
going to copy this but instead of dot
HTML and instead of just hard coding dot
SVG I'm going to give it a couple of
options so SVG or PNG or let's see JPEG
or gif for now or jiff however you
pronounce it so in a regular expression
this is or so any of
we'll match as long as there's a period
and then one of these choices and then a
dollar sign which signifies the end of
the line so it's dot SVG and nothing
else dot PNG and nothing else and then
instead of just doing use and then
passing in file loader I'm going to
actually use a different syntax here
where use is an object and we tell it
the name of the loader file loader and
then we pass in some options and the
reason I'm doing these options is that I
can specify things like the name of each
file will begin with something simple
name dot txt
so remember HTML loader is importing
this asset and JavaScript web pack
doesn't know what to do with it but now
we have this loader and we're telling it
you should make a copy of this move it
over into the dist folder with this name
so whatever the file name is dot the
extension but I'm also going to add in
the hash just to show you that we can do
that and it's not as far as I know it's
not content hash like it is up here or
is that in production it's hash maybe
both will work but this is what I've
seen in the Docs and then I'm going to
give it a output path and this is where
our assets will go so I could call it
images just to show you that we can do
something different and now instead of
our disk falter that close node modules
down when we run this web pack is going
to encounter this image because the HTML
loader encounters it inside of our
template because we used a source it
imports it and this loader is triggered
right here where we have SVG that's
matching so then it copies it over into
a new folder called images in our dist
and the name is going to be web pack dot
SVG with a hash in the middle okay let's
see if it works so we're gonna run npm
run build and it looks good so far
instead of dist we have a new images
folder notice the file name it's really
long web pack dot content
a SVG and the best part if everything
works our index.html now has image with
the source set to that it's no longer
set to what it was before assets slash
whatever SVG it is dynamically linking
to the correct image so now if I added
another image into the assets folder
whatever I added in there if it was SVG
or PNG or JPEG and then I used it in my
HTML template a used image source equals
something it would be required it would
be loaded copied over with a new name
there's other things we can do as well
like setting a compression under images
but I'm going to keep it simple so we
are now loading the files correctly and
if we go refresh the page we see the
image and if we use our live server
it also should work just fine and it
does ok so now moving on to the plug-in
I mentioned the clean web pack plug-in
you might not notice this yet but if I
go and make some changes to some of my
code let's say I go back to index J s
and I add another console dot log it
doesn't matter what it is console belt
lock J I meant to type hai but I
mistyped if I build again NPM run build
what happens is that we end up with
another bundle and every time we build
if the code changes we get a new j s
file and we only use one of them our
index only links to one of them each
time so we'll quickly install a plug-in
called clean web pack plugin which will
delete the dist directory every time we
build and then we'll have a clean slate
to add our code into or for web pack to
do it so to install the plug-in it's npm
install - - save clean web pack or clean
- web pack - plugin and while that's
going let's go back to our web pack
common although we actually only need to
use this in production when we're using
the dev server it doesn't matter because
those files are in memory when we stop
the server they go away in production
it's actually exporting it's building
the dist folder and making those files
so I'm going to import
clean web pack plug-in equals require
and then it's just clean web pack plugin
okay now I can pass in plugins here like
we have over in commonjs where we're
doing this HTML web pack plug-in can do
the same thing but this time it's new
clean web pack plug-in just like that so
right now every time we build if we
change our JavaScript or CSS or any of
our code we end up with a new bundle
file and that's just going to keep going
until we delete them but now with clean
web pack every time I run npm run build
assuming I didn't have a typo we'll see
that it is cleaned up and we only have
one file so everything that was there is
either it's deleted and rebuilt or if
it's not being used if it was left over
from the last build it's abandoned it's
completely removed and again we only
need that in production it wouldn't hurt
to add it to common or to dev but in dev
our files are using the dev server and
they're just in memory temporarily they
are not actually written down they're
not saved to the system alright so we
saw two things here file loader with
HTML loader to get our assets into a new
directory and have the links work
correctly and then also we saw how to
quickly add into production a clean web
pack plug-in alright so I'm going to
commit now and that's it for this video
next up let's talk about configuring web
pack to work to spit out multiple
bundles instead of just one with
everything we might want to separate out
our own app code from our vendor code so
let's say we're using the bootstrap
JavaScript and a couple matanov jQuery
and maybe some other library that we
need but they're not going to change
very much or ever in our application but
our main code will so we can have two
different bundles and one of them will
be vendor dot content hash j/s it will
stay the same almost all the time unless
we update that code or or I don't know
we upgrade which version of bootstrap
JavaScript we're using or something like
that and then we can have our main that
changes more frequently so this is
actually not too
difficult to do all we do is set up a
different entry point if we want so
inside of source I'm gonna make a new
file called vendor J s and to start I'm
just gonna put I don't know
alert hi from vendor just like that and
then I'm gonna go into my web pack
Commons is where we have our entry it's
set to index J s I'm going to make it an
object instead and then each property
will be the name portion of a file main
will be based off of index J s and then
vendor will be based off of dot slash
source slash vendor J s so now webpack
is going to work its magic on both of
these entry points it's going to take
this first one and it will call it main
but remember in production we have a
problem in our output where we're always
calling everything main so I'm going to
refactor this to be named in brackets
which will be main or vendor dot content
hash and I'll also do dot bundle J s and
then in dev I'm going to change this to
be named dot bundle dot j s so that name
is coming from here main or vendor we
have two entry points let's see what
happened to no need to add my comma all
right let's try it with NPM start using
the dev server it opens it up okay so we
get high from vendor and then everything
else loads okay that alert is kind of
screwing things up but if we look in our
sources we have a main bundle and a
vendor bundle and our vendor bundle
includes our alert as well as some other
webpack stuff and our main bundle
includes all of our files and everything
that we have in our app logic the code
that we're writing so let's go back and
test it now in NPM run build and just
make sure that the content hash is
working so our file names are named
correctly we have main content hash
bundle bjs and vendor bundle jeaious and
then instead of our index we now have
two script tags as you can see so I
didn't add either of those both of them
are added automatically so you can see
now hopefully you can see how this
becomes pretty easy if you want to have
multiple files or multiple bundles all
you do is add a separate entry point so
let's now go and add some bootstrap
JavaScript in so you can see the utility
of this so instead of my vendor J s I'm
going to just import bootstrap just like
that we already installed bootstrap up
in node modules and we're using the CSS
but we're not using here's the CSS by
the way we're not using the JavaScript
if I wanted to add a navbar in which
requires JavaScript let's just use this
simple one here which will use
JavaScript when you collapse or when you
shrink the page down it will collapse
into the little hamburger menu so if we
don't have JavaScript it won't work
it's right now if I just comment that
out I go to my template at the top of
the body I'll just paste in my navbar
save and now if I run NPM let's do just
a local server NPM start we get the
navbar and it does collapse but the
toggle the drop down is not working
we're not getting that drawer because
javascript is not running from bootstrap
so we go back to our code and vendor JSL
import bootstrap and you can see we run
into an issue so after I've saved over
here and I imported bootstrap I didn't
even have to restart the server but it
says that bootstrap can't resolve jQuery
which it relies on and popper j/s so two
dependencies I'm going to install NPM
install - - save dev jQuery and popper
jeaious on the bootstrap Doc's it makes
it pretty clear that you need those in
order to use bootstrap I just didn't
include them right away because we were
only using the CSS which doesn't depend
on those so now if I run NPM start and
here we go
as I collapse this down there we go our
JavaScript is working lastly let's do
NPM run build and we'll see our vendor
j/s that has spit out right here has all
of bootstrap JavaScript included it also
has things like jQuery in here which is
if I search for jQuery you can see
there's what 71 instances of it here is
where it's included we also have
bootstrap we have popper J s so all of
those dependencies are loaded and that's
what our vendor J s file now contains
and then we have our app code which is
in main j s and it's all being minified
- it includes the bootstrap CSS we will
in the next video work on extracting CSS
out into its own file but for now it's
all happening inside of this file mange
is okay so we just split up our code we
imported bootstrap into vendor J s you
could follow this pattern with whatever
other libraries you're using
so aside from bootstrap there's other
JavaScript libraries that you want you
can put them in vendor J s and they will
be bundled together into their own file
and it will always be that same content
hash unless those libraries change or
you somehow add something new in here or
change the code
this allows a browser to cache this file
separately which is less likely to
change and then your main file could
change a lot more often all right so I'm
going to commit my code with git and
then in the next video I'll be back to
talk about minimizing HTML and CSS
extracting our CSS into a separate file
right now we don't actually see a file
here but it's just magically working so
next we're going to talk about minifying
CSS as well as HTML but first we're
going to discuss extracting our CSS into
its own file or files if we prefer so
right now everything is being loaded
through JavaScript here is all of our
bootstrap CSS as a giant string in our
main J's bundle which then is injected
into the Dom as we've seen before as a
style tag so this works there's no
problem with it as far as functionality
it's it's getting there our Styles show
up but in production especially it's
nice to have a separate CSS file rather
than waiting for JavaScript to inject
the styles and the main reason has to do
with performance if I load this page I
don't know if it's going to show up in
the screencast because it's so quick if
you watch it over here you'll see
there's a flash of the unstyled content
every time I reload the page or almost
every time so what's happening is that
the page loads there
is no CSS at all all that is happening
is a single or two JavaScript script
tags at the bottom of the page so all of
our content loads the HTML elements h1s
inputs buttons then we get to this
script and these two scripts run and one
of them takes our CSS and it finally
injects it into the Dom so it happens
very quickly but everything is actually
loading first so there is no stylesheet
up here that is going to style things
first so there is a flash of unstyled
content there it is one more time
so in production especially we want to
avoid that it's it's just not a good
experience for users we want our CSS to
load have it be up in the head
everything is styled and then our
JavaScript can load and it might take a
couple milliseconds or sometimes longer
and we won't have to wait to get our
Styles now the reason we're not going to
do it in development mode is that it
takes time to spit out CSS files it's
much faster when you're just developing
with the the dev server you don't want
to wait each time that you save
something or you change your code you
don't want to wait for it to recompile
and rebuttal and spit out new CSS files
so we're just going to do it in
production and the way we do it or one
way to do it is using a plug-in called
mini CSS extract plug-in so we're going
to begin by installing it so it is NPM
install - - save dev mini CSS extract
plug-in and while that's loading we're
going to go into our web pack production
and import or require that module and
then we can use it inside of our plugins
so we'll pass it in we'll do new mini
CSS extract plugin just like that and
save and if we want we can specify a
couple of options we'll just do file
name and have file name be the same sort
of pattern we've been following so name
dot and then we can have the content
hash dot CSS alright so that's the first
step but this actually isn't enough the
next thing we need to do is make sure
we're using this instead of the style
loader that we're using right here
right now we're using this all the time
it's in common webpack common so every
time we load as CSS the same would apply
if this was CSS we are first running it
through sass loader and then CSS loader
which remember this one converts sass to
CSS this one turns CSS and the
JavaScript this one is what actually
injects those JavaScript strings of CSS
into the Dom we don't want this to
happen in production we're trying to
avoid that
instead we want to use this mini extract
or mini CSS extract plug-in to grab
those lines of CSS and put them in a new
file so I'm going to actually move this
this entire rule away from the common
config file I'm gonna put it in dev
because in dev we do want it and I need
to grab module rules need to follow the
same syntax that we had I copied the
wrong portion okay so everything looks
the same module rules and then in
production we need to do the same thing
so module rules but this time instead of
style loader we're going to change this
to be mini CSS extract plug-in dot
loader so it comes with a loader that we
can use as part of the plug-in and this
instead of inject Styles into the Dom
this is going to move or extract CSS
into files so remember they load in or
they run in reverse order this happens
then this happens and then finally it
should create new files for us including
the CSS that was loaded by CSS loader
that was originally converted from sass
to CSS by sass loader oh right let's see
what happens now we will do NPM run
build fingers crossed no errors you
never know and you can see it takes a
little while but it should spit out a
CSS file and indeed it does so we have
this CSS file now that is separate and
if we look at our index.html that it
gives us it now includes a link tag up
at the top so we're no longer waiting
for the page to load for the JavaScript
to load
then inject our styles into the head
it's all happening at the beginning it's
compiled it's built this way from the
get-go so that plug-in is extracting all
of our code all of our CSS into one CSS
file you can configure it to do it in
multiple but for now one is fine this is
all our CSS so bootstrap is pretty much
all of it we override those colors using
sass but if we had other styles as well
if they would be in here
assuming that we were writing in them in
this file and now if we refresh the page
let's make sure it still works notice we
don't get that flash of content anymore
I'm doing the same thing but it's not
we're not seeing the unstyled content
our link tag is included in the correct
spot up in the header and I guess I
should call attention I use the content
hash again just to help with caching and
to prevent caching when we don't want it
to happen if we change the file this
cache will change all right so that
should be review from earlier videos so
notice that this is not modified this is
quite large so one thing we might want
to do is minify this CSS and it's not
very difficult to do there's a plug-in
to help us and it happens to have a very
long name in my opinion optimized CSS
assets web pack plug-in one of the
larger packages larger package names a
large package oh boy one of the larger
package names that I've come across so
optimized CSS assets web pack plug-in is
going to help us minify our CSS so the
first thing we're going to do is install
it so we'll do that now NPM install - -
save dev optimized CSS assets web pack
plug-in while that's going we're only
going to minimize our CSS in production
we don't need to do that in development
it's a lot easier if we only do it in
production it takes time but it's also
you know frustrating if you're trying to
debug something in CSS it's super
minimized it's not a huge issue you can
do it in development if you want but I'm
just gonna do it in production so we
first need to import it here I'm just
going to use const to match everything
else that i've been doing and where we
actually use this it's not as a plugin
on its own we add a new property here
called optimize
that we haven't seen before and then
within that we specify minimizer and
this is an array multiple minimizer's
because sometimes we're minifying
javascript or minifying CSS like we are
in our case and I'm going to pass in new
optimized CSS assets plug-in just like
this and then add my comma okay before I
run this to show you what happens let's
take a look at two things I'm going to
close down a lot of stuff we have a lot
going on so inside of our build folder
we have our CSS which is not minimized
it's a very long file then inside of our
JavaScript files we have minimized code
so I'm showing this to you for a reason
this is all minimized or minified now if
i run npm run build where we're telling
it to use optimized CSS assets plug-in
to minify our CSS let's see what happens
okay so that finished up and let's look
at our CSS now it's minified so that
part's working but something weird
happened if we look at our JavaScript
it's no longer minified why is that
happening so it's kind of annoying that
this happens but when you set mode to
production by default optimization
minimizer is set to use a javascript
minify but then we're overriding it
right here by telling it to use this off
to my CSS assets plug-in it basically
ignores what was there before which was
minifying the javascript terse rjs
plugin that will we're going to
reintroduce in just a moment so we have
to manually add it back in it was there
but by adding in this plugin we
completely override what was there
originally inside of minimizer so now we
don't get JavaScript being minified only
CSS and another thing I'll show you if
we look at the message we get it says
warning an asset size limit the
following assets exceed the recommended
size limit 244 kilobytes first of all a
lot of people think that this is a
pretty sensitive or a low threshold for
this warning 244 is not really a huge
file but you can see our vendor j/s
vendor bundle jeaious is quite large now
and
weren't getting this before because it
was being minified it's not anymore
so if we look at the file it's quite
long it's all a bootstrap and jQuery and
popper j/s so now we're going to add in
the plugin that was already being used
we don't actually have to install it but
we do need to require it and it's called
tercer webpack plugin again I haven't
installed this myself it's already
inside of node modules if you scroll
down look for T cursor you'll see come
on where are you right there tersh or
web pack plugin I promise you I didn't
install it myself it's not in my package
JSON but it's there because web pack was
using it already you can see it's not in
here okay so we're going to require it
and then pass it in as a minimizer new
tercer plugin so tercer is the default
minimizer for javascript and web pack as
i already showed you it was being used
before but we overrode it and ignored it
so we're adding it back in it used to
use webpack used to use Uggla fire by
default I believe now it's tire but they
do pretty much the same exact thing they
minify your JavaScript so let's see what
happens now let's try it npm run build
again i'm only minifying in production
for my javascript and doesn't work you
can see how long this takes by the way
so we don't get that warning anymore
that's it's not saying that our file is
too large vendor is now 167 kilobytes
instead of what 400 something yeah 484
so a significant reduction in size and
if we look at vendor it's minified if we
look at our main file it's minified if
we look at our CSS it's minified there's
only one thing that is in index.html now
it's very short but we can optionally
minify our HTML in production we don't
have to use any additional plugins we
already have this HTML web pack plug-in
right here I can pass in other options I
can specify minify this is part of the
the plug-in documentation where I found
this and instead of minify I can do
things like remove comments and set that
to be true or false but I'm not going to
do it here
inside of webpack common because I don't
want to minify my HTML in development so
once again I'm gonna pull this out and
move it to production so instead of our
commonjs
web pack config we don't have any
plugins they don't share anything at
least they don't share it in the exact
same way so now inside of dev I'm going
to add in this plug-in again so plugins
and paste that in add my comma and I
need to make sure I am requiring it at
the top of web pack dev and then in web
pack production I'm going to require it
as well but I'm going to alter some
options I'm going to pass in some minify
options so let's do that now right here
paste it in and after template I'm going
to say minify and the three I'm going to
go with our remove attribute quotes
collapse whitespace remove any extra
whitespace and remove comments set that
to be true so let's let's do something
in our HTML where we'll actually be able
to detect this will tell if it's working
so let's go to our template file and add
some comments in here like mm how about
above the navbar
we'll say bootstrap navbar and then
let's add in some white space I'll just
do a single line and we'll just leave it
like this for now we'll look for that
top comment here bootstrap navbar and
see if it makes it in to our end result
when we are in production so let's now
run NPM run build and twiddle our thumbs
for a moment okay let's look at
index.html all right definitely minified
you can see the attribute quotes have
been removed so type equals text
there's no quotes for example we have no
white space or most of the whitespace
has been removed and then also my
comment is gone at least I can't find it
if I look for it I'm pretty sure we'd
see it pretty pretty easily because it
would stand out with a different color
so it's not in here and let's just check
that it does work so i refresh the page
okay it's loading we're getting all the
code that we expect
scripts working its minified we're
overriding bootstrap or using sass
change those colors we have separate CSS
files or single file where are you right
here it's minified we have our minified
vendor J s and our may NJ s and then our
index.html minified as well so
everything has been crunched down if we
have our images to forget about that and
then instead of elements we still can
see everything that's normal right we're
by minifying it we're not like
corrupting it
we're just shrinking it down and
collapsing it into as little space as
possible now let's just verify it still
works in development so NPM start notice
how much faster that loaded for me that
took maybe a second or two to build
originally and then rebuild should
actually be faster and if we look at the
code index is not minified we can see my
comment is here all the attributes have
quotes our code our javascript is not
minified and there is no CSS remember it
well it's in the files but there's no
CSS file on its own and remember the
reason we do that is that it takes a
while to build those files and in
development if I change something I
don't want to wait and that's it for now
so I'm going to commit we have a whole
bunch of things going on in web pack and
we've honestly only scratched the
surface in some ways because there's a
lot of other things to talk about I mean
if we look at those that list I showed
you early on if the different plugins
available of the different loaders web
pack can do a ton of stuff but as you've
seen it's really how I put this
intimidating it can be overwhelming when
you're starting out and it's something
that you only really do once every
project maybe you go and update
something but often you know you're not
you're not writing code in this file and
your web pack config all that often
especially if you work at a company on
one large production app the config file
doesn't change all that much so a lot of
people don't have much experience with
it and it takes some time and some
practice to get used to it but there's
just nice little patterns you follow you
know you just remember rules tests use
there's certain loaders that you use
frequently like style loader and tercer
js4 minification you know there's these
different patterns but at the end of the
day
all that we're doing is taking a bunch
of different types of files in our case
an SVG file an HTML file JavaScript
files s CSS and we combine them in some
ways not all into one file but we
combine JavaScript into different files
all of our different J's files you know
we haven't touched these in a while but
five different files plus the bootstrap
j s+ jquery plus popper J s and we spit
them out into bundles there minified
they have hashes in their name that
pertain to the content inside of them so
those hashes will only change if the
content changes which helps with caching
and preventing caching when we don't
want it then we have our CSS being
pulled out in in production we have our
index.html being built for us with all
of the links included dynamically so we
don't have to write any of these script
tags right this is all done for us and
then we set things up in development
mode to be a little simpler we have our
dev server that is going to update and
rebuild anytime we change something just
serving it on localhost
we aren't minifying you know we aren't
using the content hashes our CSS is not
being extracted or hTML is not being
minified but we're still joining
together all these different files and
making sure everything works for us
okay so I'm gonna leave it off here I
know that was a lot I'm gonna commit
this will be the last commit for now
please let me know if you have any
feedback I'd love to hear what you have
to think any suggestions or things you
liked take a look at the code of course
look through my commits and I think
that's it all right talk to you later
talk to you later all be on YouTube
later if you enjoyed this video my cat
and I really appreciate it if you share
it with anyone you think would get
something out of it I'll leave a comment
subscribe please turn on notifications
oh so annoying asking you to do that