In this Webpack 5 video tutorial, I’m going to show you how to install Webpack 5 and Webpack CLI, run the Webpack from the command line, create a Webpack config file, set up an NPM script to run Webpack, and finally run Webpack in watch mode.
Install Webpack 5 and Webpack CLI
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.js I’m using. As long as you see version 10.13 or higher, you will be able to install 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.
Setup the Project to use Webpack
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.
Run the 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.
Create a Webpack Config File (webpack.config.js)
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.
Use a Custom Webpack Config File
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.
Create an NPM Script to Run the Webpack
Let’s add an npm script to our package.json file.
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.
Run Webpack in Watch Mode
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. And hit save.
We should see that this watch command reruns automatically.
And I should see the changes by hitting the refresh button.
GitHub Repo
Check the GitHub repository here → GitHub