Instructor: Now in order to make our lives
a bit easier when writing JavaScript we're going to add
the webpack dev server to our setup
in order to automatically reload the page
when we save our code.
So besides all the amazing functionality
including in webpack it also provides us
with a development server.
Which will automatically bundle all our JavaScript files,
and then reload the app in a browser
whenever we change a file.
And this is of course a huge time saver
and makes coding a lot more fun.
Now let's start by actually installing it,
because again webpack dev server is an npm package,
and so let's install it.
So npm
install
webpack
dev server,
and then again of course we're gonna save it as a dependency
so a dev dependency.
Alright, let's go back.
Just to check out the package adjacent file,
and confirming it of course it is now added here
to our dev dependencies.
Now in order to configure this dev server,
let's go back to our config file here
and add yet another field here.
And this one is typically called dev server,
and in here we pass an object
in which can then specify a couple of things.
Now the first one is the content base.
So content
base.
And in here we will specify the folder
from which webpack should serve our files.
And in this case that is the distribution folder.
So dist, so this folder here,
and that is because basically this is here the code
that we're going to ship to the client.
So our app, all of the final code of that app,
is here inside of this distribution folder,
so we will always have an index file with the html,
then the JavaScript, image, and CSS,
and so as I explained in the beginning
the source folder here is only for our development purposes,
so all our source code basically goes here.
Which then gets compiled or bundled
into this distrubution folder as bundle.js
and so what we really want to serve
is only what's in this folder here, right?
And this is actually only thing
that we have to specify in this case.
We can also specify the port, but a bit more on that later.
So for now let's just leave it at this,
and now to make it work,
again lets just add a new npm script here, okay?
And one of the standard names
for this kind of stuff is called start.
So a script start will always be a script
that keeps running in the background
and updates the browser as soon as we change our code.
Okay so this is again, kind of a standard name
just like dev and build.
So these are all standard names
that you will find in other projects as well.
So start and what we want here to happen
is to run webpack dev server
with the mode of development
so just like here we passed the development option
and then we can also specify another option
which is open.
And all what that means is that it'll actually open up
the page in the browser automatically, okay?
So let's actually try this out.
So this is already be enough here,
So let's open up our console or terminal
and write npm run start.
Hit return and
here we go.
So this is again the same page that we had before,
and let's open up the console again,
and we see that it is actually working.
While there's one thing missing here,
but that's just a D5 icon, so that doesn't really matter.
So you can just ignore this arrow if you get it as well.
So you see that it is actually the exact some thing as here.
But the difference is that this code here,
is now running on a real webserver,
it's a local webserver.
So its local host on the port 8080,
but it still, it's simulating a real http server,
while this one here is just a regular file opening,
so you see it here, it's like the file protocol
and then the entire path that we have here, okay?
So this here is much better
because this simulates a real environment
with a real http server.
So let's close this one up here and leave this one open,
and so we can now change some stuff here
so instead of returning or exporting the 23 here
let's export 99 or something like that
and then we can also change this text here
in the index.js
called
test
dot js
So let's save this too, go back, and you will see
that this should now automatically reload,
and actually it did not.
So let's take a look at the terminal here.
And actually says that it did recompile these two files here
but still for some reason this is not really working here.
And if we reload it ourself then it still says,
here it is, just what we had before.
So let me try to restart this server here,
so in order to stop this process here,
because as you see this process here is now running
it's not giving us a new line,
where we can continue writing commands,
so it's still running and if you wanted
to open a new one, we can simply open like a new tab
by hitting command t and in windows you will have
to open a new window, okay?
So we can do this or we can also stop this process
that's running by hitting control c on the mac,
so not command c, but control c, okay?
And so not it's stopped and so let's actually run it again,
npm run start
open a new one that's inspected
and well something is not working,
so let's go back here,
see what's going on,
and I think I actually know what is going on here,
so when we're running the development server,
webpack will bundle our modules together,
but it will actually not write it to a file on disk,
but instead it will automatically inject it into the html.
Okay?
And so we could actually go ahead
and delete this bundle file here
because right now it still looks the same here
in this console because it's still simply reading
the results from this bundle.js file
and not from the one that we're generating on the fly,
through the dev server because there's something
that's wrong here.
And the problem is that the outpost path here is this
dist and then slash js and so it will basically try
to inject this bundle into an html that is here
in the same folder, so also in the JavaScript folder,
which is not the case, so the index.html is outside,
and so we want to get rid of this part here,
so the real path of the output is now only dist,
and then we can put the js here in this file name,
okay so there's no problem this works just exact same way
all we're saying is that really now the output folder
is this entire dist folder here, okay?
And no longer just a JavaScript folder,
and this will be important for something else
as I will show you in a minute, after we have this working.
Okay?
And so this dist folder here is now the exact same as here,
and so now it should actually be working.
Alright, so let's actually quit this here,
clear the console, and run npm start again.
Open up the console again and whoa here you see
now it's finally working I imported 99
from another module called test.js
and so that's exactly the change that we did a second ago
now let's change it again here,
let's say to one, two, three, four, five,
save it
go back
and here we go
so now it says one, two, three, four, five
awesome right, so without us having
to reload anything it does it automatically
injected into this file here, and it just works.
And let me show you that we can actually even
delete this bundle here and it will still keep working
so let's now put even more here, eight, nine, ten
or just eight, nine, okay
And here you go.
So the bundle.js file is actually gone,
but this here still keeps working.
So great right.
Now one final thing that I want to do in this video here
beside making this development server work for us,
is to
also copy
this index.html file
into our distribution folder.
So this here is basically the html
that holds the html for our app,
at least the bare bone structure so to say,
and we see that down here we also have this,
well this outcome in the script here,
I could even just delete it altogether okay?
So no script tag in here and this is our source code,
now what we want to do with is to automatically copy it
inside of the distribution folder
and then inject the script tag into it automatically
and webpack allows us to do just that very easily.
So let's do that.
And in order to do that we use something called plug-ins.
So remember in webpack we have
entry points, output, loaders, and plug-ins.
And so let's now talk about plug-ins.
So basically plug-ins allow us to do complex processing
of our input files, and in this case of our index.html file.
So we want to use a plug-in called html webpack plug-in,
and in order to use it, once again,
you can probably guess it already,
we have to install it.
So we go back to our terminal here,
and now we using this new tab here that I created earlier.
So npm install
html webpack
plug-in,
give it a save dev and then here we go.
Okay?
Now just like before we have to require this package
and save it to a variable.
So const, and the standard here is to simply call it
html webpack plug-in
and then use require,
and then use the name of the package of course.
Alright.
So now we installed and required, so included basically,
the html webpack plug-in.
And so now, in here, we can specify our next property,
and this one is called plug-ins.
And plug-ins basically receives an array
of all the plug-ins that we are using.
And so the first, and actually only one,
is of course our html webpack plug-in,
and here we are missing a comma here, of course
And alright.
So in order to use it, we use new and a html webpack plug-in
So this is the variable from up here,
because basically this is here like a function constructor,
so it's like a new class.
And so that's is why we are using new here,
as we already used to do, right?
So new html webpack plug-in
and then in here we pass a couple of options,
again using an object,
okay?
So this is a very common pattern in modern JavaScript
actually is to always pass options using an object like this
so this entire configuration right her is an object
and so is the options here for this plug-in, okay?
So remember what we want to do.
So we want to copy each time
that we are bundling our JavaScript files,
we also want to copy our source html
into the distribution folder
and include the script to our JavaScript bundle
so basically again this is our source
and this index here will then be our final
and ready to go to production html file, okay?
So we specify the file name,
and then simply call it index.html,
html
and then we use the template
property
so template is basically our starting html file,
and this one is located here at source,
and then index, right?
So again, current directory, then source,
and then index.html
Now we can also use this plug-in
to actually create a new html file
from scratch automatically without providing any template.
But that's kind of outside the scope of this tutorial, okay?
But you will see that' there are some apps
that don't even have an index.html file
in their source code
but instead it's automatically generated
on the fly by webpack.
Alright
So let's get rid of this one here.
So delete.
And let's actually check out if this is going to work.
So I'm stopping this
this process here,
and now you actually see here in the background
that it says disconnected, so it immediately noticed
that we disconnected our server here.
So let's now run it again and it will open in a new tab
and whoa here we go.
So you will see that right now
we already have the forkify app
and that's because webpack already copied,
you see it copied this index with html file into this folder
and as I mentioned it's not really visible right now,
because it's not saving this data on the disk, okay?
So when we're using the dev server it will not save
the files on disk, it will simply stream them to the server
Okay so if you go now and open up inspect,
then here's, or course, the exact same code as we had before
and that's because, if we inspect the elements here,
you will see that it injected this script okay?
So just like magic this worked, just fine.
Now if you wanted to actually see these files here on disk
we would have to run one of these commands,
so for example here dev or build,
and this one then will actually to the bundling
and save it on disk.
So let's do dev here
here in this other tab that we have,
so npm
run dev.
Then it does it work, and now you see index.html is here
and bundle as well.
And now you see down here,
when we come here,
here is the final js/bundle.js
and this is the file name that we specified here
in this config, right?
So exactly this one here.
So this seems like magic but that's just the work
that webpack does here behind the scenes,
and it is a fantastic tool, and very helpful,
in our development workflow.
I agree that it is a bit difficult to set up,
there are easier options out there,
but this is also the most powerful.
And so once you have the setup you can then use it
in the future for your own projects,
and of course do some changes to make it even better,
but for our project this is more than fine just like this.
The only thing that is missing now is to include babel,
so in order to convert ES6 down to ES5,
and so that's what we are going to do next,
in in the next lecture.