How to Setup Webpack 5

Transcript

In this video, I'm going to show you how to install Webpack and Webpack CLI,
run the Webpack from the command line, create a Webpack config file, setup
an NPM script to run Webpack, and finally run Webpack in watch mode.

First, I'm going to navigate to my project root directory or where I want it
to be. If you haven't set up your NPM project, run
npm init —yes, and this utility is going to create the
package.json file for your project.

I'm then going to type, node —version, and this will let me
know what version of Node I'm using. As long as you see version 10.13 or
higher, you will be able to use Webpack 5.

Now the next thing I'm going to do is, install Webpack and Webpack CLI. So I
will type npm install —save-dev webpack@5 webpack-cli@4, and
they will be saved in our dev dependencies. Webpack CLI will allow us to
interact with Webpack from the command line.

Now that we have set up our project and have installed our dependencies, we
are going to run our first Webpack build.

Now let's install jQuery by typing npm install —save jquery.
Installing jQuery is just for demonstration, and you do not have to install
it to use Webpack.

And now that it's included, I'm going to make a couple of folders inside the
project directory. The first is going to be called source, and the second is
going to be called distribution. The src folder is where we will put all of
our source files, and dist is everything that is intended to be used for
distribution or production. So let's create a new file inside the source
folder, and this is going to be called index.js.

Now we are going to create a variable to import or require jQuery. We will
then use a few selectors to select an h1 element with id set to "title". And
we are going to set the element text to "Hello Webpack". And we then are
going to create a new file called index.html in the dist folder.

So let's create a simple HTML file. Then we will add an h1 element inside of
the HTML body. I'm then going to add a script tag and set the src to
bundle.js. bundle.js doesn't exist yet, but we are going to generate it
using Webpack.

Back to the terminal, we are going to run the Webpack command. I'm going to
type ./node_modules/.bin/webpack. The next thing I want to
specify is the entry point. The entry point is whatever the main JavaScript
file is. So I will say ./src/index.js. And then we want to specify where we
want to put the Webpack bundle. So I will type
--output-path ./dist/ --output-filename bundle.js.

And the last thing we want to specify is the mode, which could be either
development or production. In development mode, the speed of the build
process is prioritised. And in production mode, the size of the build will
be optimised. So I will say —mode development.

And if I run this, it's going to look in the source folder for the index.js
file. And it's going to generate the bundle.js file in the distribution
folder. Not only does bundle.js have all of the code that we wrote, but it
also includes jQuery.

And if we pull this up in our browser, we should see "Hello Webpack" being
added to the h1.

At the root of our project, we want to create a file called
webpack.config.js, and this is going to set up all of our configuration
options for Webpack, so we don't have to type commands manually. The first
thing that we're going to import is the path module from Node.js, and this
is going to help us route our created files into the proper directory. We
then are going to use module.exports. Then I'm going to set the mode to
development.

Then we will set up an entry point. The entry is the starting point for your
application, it tells Webpack which file or files to start with, and Webpack
builds up the dependency graph from there. It can be specified by a string
for a single entry point or an object for multiple entry points. So we'll
say ./src/index.js.

We will also specify an output. The output defines where your application
will be placed once all the build tasks had been performed. And this is
going to be the file name bundle.js, and the path, path.resolve, we want to
look for the __dirname dist for our output.

So to run webpack, let's run ./node_modules/.bin/webpack, which
will generate that bundle.js file, which we should see in our dist folder.

By default, Webpack is going to look for the webpack.config.js file in your
project root. But if you want to call it something different, you can always
pass a config flag so that you could do something like
./node_modules/.bin/webpack —config, and then you could say
my.webpack.config.js, and this will look for this file instead.

Let's add an npm script to our package.json file. Here in the package.json,
I'm going to change the test command to a new one called "build", and the
build will be set to ./node_modules/.bin/webpack. So that I can
run npm run build inside of this project directory, and it will run Webpack
for me. Let's try it. I'm going to say, npm run build, and this should
execute Webpack.

I can also use a —watch command, and this is going to be a flag for running
Webpack in watch mode. Let's add another NPM script for watch mode. It's
going to be called build:watch. And it's going to set to
./node_modules/.bin/webpack —watch

Let me show you what I mean by this. I'm going to run npm run build:watch.
Now, if I go to the index.js file. And If I add a few exclamation marks
here. And hit save. We should see that this watch command reruns
automatically. And I should see the changes by hitting the refresh button.