Narrator: In this lecture you will learn
how to create a basic webpack configuration.
So webpack is the most commonly used asset bundler.
So it doesn't actually not only bundle
JavaScript files or modules, but bundles all kinds of assets
like JavaScript, CSS, and images.
Okay?
So we see here on this left side all of these dependencies,
all of these files, like depending on each other.
And webpack then bundles these together
into just one JavaScript, one CSS file,
and then these images here.
Okay?
Now in our case we're not interested in CSS or the images.
We just want to bundle all of our JavaScipt files
into one big bundle, okay.
So I'm gonna use webpack four here,
which by the time of recording
is the most current version available, okay.
And this version actually now supports
something called zero configuration
where you don't even need to write a configuration file.
So if you want to do that you just
need to have one source folder in the root
and then in there one index.js file.
And webpack then will automatically create
a distribution folder and put the bundled file in there.
But that's just for really small apps
and so that's not really what we're interested in.
Okay and so we will write some configuration.
And in order to do that let's go back to our text editor
and add a file here called webpack.config.js.
So this is just a regular JavaScript file.
You can see it here, but actually Visual Studio code
identifies this file here as a webpack configuration file
with this icon here, okay.
Now in here we have one object
in which we can specify our settings or configuration.
So adjust one object and then we want to basically export
this object from this file using the node js syntax.
And that works like this: so module.export
and then we export here this object.
Okay?
So don't worry about understanding this part here.
This doesn't really matter.
This is just again to export this configuration object
that we're about to write here,
so that webpack then can take this object and work with it.
Now to create this configuration we need to know
that in webpack there are four core concepts:
it's the entry point, the output, loaders, and plugins.
And we will just do a very simple config here
because again our app is fairly simple.
So starting with the entry point,
all we need to do is to specify
the entry property here in this object.
And the entry point is where
webpack will start the bundling.
So basically, this is the file where it will start looking
for all the dependencies which it
should then bundle together, okay.
So we're gonna start seeing how this really works
once we start experimenting with this.
Right?
Now in here we can specify one or more entry files,
but for now we just want one entry file
and that is this index.js file, okay.
So let's now simply specify the path to that
and it is dot and what dot means here is the current folder.
Okay?
So just like in the command line when we have dot dot,
so something like this,
this means go up to the parent folder.
But just one dot is the current folder.
So current folder, which is the product folder,
then go into the source folder,
then js and here it's index.js.
And that's it. That is our entry point.
So that's the first property in this object here.
Next up we need to define the output property,
which will tell webpack exactly
where to save our bundle file.
So we specify the output property
and now in here we actually pass an object.
And then in this object we put the path.
So the path to the folder and then the file name.
So path and I'm going to leave it empty for now
and then the file name.
And as the file name we simply want bundle.js.
So that's kind of a standard name for a webpack output.
Now about this path here this actually
needs to be an absolute path here.
And in order to have access to that absolute path,
we need to use a built in node package.
So let's include that node package here.
And it works like this...
Require path, okay?
So again don't worry about the syntax here.
This is just to include a built in node module,
again called path, and then put it in the path variable.
Now in here, what we want to do then is to use
a method which is in the path package, so path.resolve.
And then we use the dirname variable
that node gives us access to.
So this variable here, this is the current absolute path.
And so we use path revolve to now join this current path
so that the working directory, the Forkify directory,
with the one that we want our bundle to be in,
which is dist.
Right? And then in there js.
Okay, does it make sense?
So again, this path resolve, which is a method
which is available to us through this path package
that we included up here on this line,
we will then join the current absolute path
with the one that we want our bundle to be in.
So dist/js. So basically this folder here.
And so now webpack will output our file
to this directory with this bundle.js file name.
And that is now actually all that we need
in order to get started.
Now we can just make this a little bit better
because in webpack four we now have something called
the production and the development mode.
So the development mode simply builds
our bundler without minifying our code
in order to be as fast as possible.
But the production mode will automatically
enable all kinds of optimization,
like minification and tree shaking
in order to reduce the final bundle size.
Okay?
So that is another property that we can set.
For example, by saying mode development.
Okay?
And so now it will be as fast as possible
and not compress or cut because
that's not necessary during development.
Okay, so for now that's our very simple configuration.
Later on we are going to look at loaders
and plugins as well, but for now
we just want specify the entry and the output
and also the mode here.
Now in order to actually test this out,
we need to create a new JavaScript file.
So right now we have the index.js,
which is our entry point, remember.
So now let's say that we want
to include a new module in here,
so that we can actually test
if the other module is included,
so if they are bundled together.
So just for testing purposes,
let's add a new file here called test.js.
And in here let's say console.log imported module.
Okay?
And then we can also export something from here.
So we say export default
and now let's just export some number here.
So let's say just 23. Okay?
And so this is the official ES six module syntax,
that we're using here.
So if you want to export something we used export keyword
and then we can have a default export or a named export.
And I'm going to explain all of this
in one of the later lectures
when we're gonna start implementing
our apps architecture using ES six modules.
But for now just keep in mind that this is the easiest
and standard way of exporting something from a module.
Okay?
So we have a console log and
then we export something from this module.
And now here in the index.js file, which is our entry point,
we can then go ahead and import something.
So we have to give it a name, a variable name.
So import x from and then the name of the module,
which in this case is test.
So the current folder slash and then test.
And now when we import from a module
we don't even have to specify the dot js.
So all we need to do is write test,
which is the name of the module,
and what we exported.
So remember we exported this 23 here.
This will then be saved into the x variable.
Okay, because we called it x.
We could call it also number or num, for example,
so that doesn't really matter.
But right now we have access to what we exported
from this module here into this num variable.
So let's now log that to the console.
So console.log and let's say,
"I imported num from another module."
And now right now this wouldn't actually work
in the browser if we weren't to use webpack.
So we really need webpack now
in order to bundle these together.
Okay, so again this is only going to work
with webpack or some other bundler.
And that is exactly why we're actually using it.
So we have our example set up,
now there's just one last thing that we have to do,
which is to go to our package.json and add an npm script.
So let me know do that and then I'm going to explain
you what an npm script actually is.
So let's call this one dev, which stands for development.
And then we don't want any of this.
So what we want here is to call webpack
and actually that's it.
So all we need to do here is to actually call webpack.
So as soon as we start the npm script called dev
it will then open up webpack,
look up our configuration here,
and then do the work that we specified here.
So it will read our entry file, do it's work,
and output it exactly here, as we specified.
And why do we have to use an npm script for this?
Well because that's just the only way
or at least the best way to launch
our locally installed dev dependency, just like webpack is.
Okay?
Now actually in order for this to work
we need to do one more thing,
which is to install the webpack command line interface.
So right now we only have webpack,
but we need something to be able to access it
through the command line interface.
And so there's another package for that one. Okay?
So webpack they could have done it all in one package,
but they decided to put that functionality of accessing it
via that command line in a separate package.
So let's install that very quickly as well.
So we already know how to do that.
So npm install and this one is called webpack cli.
So it's also an official webpack package
from the same authors, it's just to get access
to webpack through the command line interface.
And again we want to save it in our dev dependencies.
Hit return and wait for it to install.
So here we go, let's check it out.
And here you go, it's now actually
in our dev dependencies, here as well.
So right now we're ready to launch this npm script.
And it's actually very easy.
All we have to do is to go back to our terminal,
say npm, and then run.
So run is the keyword if you want to start
one of our npm scripts and this one is called dev.
And so let's hit return and see webpack doing it's work.
And that's it. So it's already finished.
You see bundle.js with a size of 3.59 kilobytes
and so let's check it out.
And here you see it's actually right here.
Let's open it up and you see it looks really weird.
So it has all of this code and down here,
like really inside of this,
you see some of the code that we wrote.
So something like this here, I imported
and then all of this weird code.
So it's really hard to understand
what webpack does behind the scene
and it doesn't really matter to us.
All we want is for this to actually work. Right?
And now one final thing that we need to do
in order to test this, is just to create a quick HTML file
here inside of this dist folder.
Just to include the bundle file
and to see in the console if everything's working fine.
I could just use this one that we already have here,
but I can just create a new one as well.
So index.html, then I use emitter
and I'm not sure if you're aware of this tool,
but in VS Code at least, emit already comes pre-installed.
And so all you have to do is to
write this exclamation point,
hit the tab, and then it will write this
pre-formatted HTML skeleton for you.
Okay?
So let's just include a script here.
Js bundle.js, okay?
So I'm gonna call this one test.
And so let's open it up.
And let's actually do that from the console, okay?
So open dist index.html. Hit return and here we go.
So that opens that HTML document,
hit inspect to open the console,
and here we see the result.
So you see imported module
and then "I imported 23 from another module!"
So that's perfect, right?
So this imported module here comes from the test.js,
so this one here, then we export 23 back into index.js,
where it's saved as num, put into the string,
and logged to console.
And you see that 23 is exactly the number
that we exported from test js.
Right? And you see now that it's perfectly working.
So that's amazing, right?
Webpack is already configured,
everything's working just fine.
And so yeah, that's fantastic!
Now one last thing here regarding this node
that we have here, so we set it to development,
but once we're ready we then want to
set it back to production.
But that's not really perfect,
having to come back to this configuration file here,
in order to change this.
And so we can actually move it here,
out of the config and into our npm script.
So let me show that to you.
So we delete it from here, come to the npm script here,
the dev one, and then we can actually
set that mode right here.
So mode and then development.
Okay? And then what we can do next is to add
a new script called build, which is also for webpack,
but with a new mode, which is then finally, production.
And so let's use this one now.
So the dev one is now for development
and build is once we're ready we build it
then with the production mode,
so that it will then compress our code.
So let's test that here back in the terminal.
Let's clear this here and I can actually
use command k, at least on a Mac.
I'm not sure how it works on Windows.
And then let's say npm run build.
Then it will do it's work and you see
that right now it's much smaller.
Remember that is was like three point something before
and now it's only 647 bytes.
So it's much smaller and we can see
that here as well when we open it.
And so whoa! Now it's just this small piece of code.
All right, so all of this was compressed
to just this piece of code.
Right?
Now running these command series,
these npms, over and over again,
whenever we want to see the results
of the code we just wrote is of course not perfect.
And so in the next lecture,
we will make our lives a bit easier
by installing something called the webpack dev server.
But that one I'm gonna leave for the next lecture
because right now I this already
more than enough for just one video.
So see you then in a second.