This book follows the development of a sample project step by step, and I am sure you will find this a simple way to learn how to use Webpack 5.

Webpack 5 packages all its dependencies within the application you wish to bundle on a local machine. Theoretically, this can be done remotely, but to save any confusion for first-time users, I will emphasize the use of a local machine.

Installing packages locally is recommended for most projects. It makes things easier when upgrade or break changes are introduced. 

We will begin with the npm installation. npm is the package manager that you will use with Webpack 5. Once this is installed on your local machine, you will be able to use the npm command using a CLI, such as Command Prompt.

Once you have installed npm, you can move on to the next step, which is to open your CLI. There are many to choose from, but for the sake of this tutorial, we will use Command Prompt. 

Let's break this down step by step so that you can follow along:

1. Install the npm package manager, which you will use with Wepback 5.
2. Open the CLI (in this tutorial, we will be using Command Prompt) and type the following:

mkdir webpack4 && cd webpack5
npm init -y
npm install webpack webpack-cli --save-dev

Let's break down the code block. The preceding command will first create a new directory on your local machine, called webpack5. It will then identify the current directory (cd) as webpack5. This means any further commands made through the CLI will be made with respect to that directory. The next command is to initialize npm. A full list of these basic commands and what they mean can be found in the Further reading section at the end of this chapter. This section makes for some interesting reading and I'm sure you will learn something new. Then, we locally install Webpack and install webpack-cli—this is the tool used to run Webpack on the command line.

3. Next, install the latest release, or a specific version of Webpack, and run the following command. However, on the second line, replace <version> with the version of your choice, such as 5.00:

npm install --save-dev webpack
npm install --save-dev webpack@<version>

4. The next command is npm install, which will install Webpack 5 in the directory and save the project in a development environment. It is important to note that there is a difference between the development and production environments (or modes):

npm install --save-dev webpack-cli

The following lines are a code snippet from the package.json file. We need these in the input files to generate a webpack.config.js file, which holds the configuration information for your Webpack bundle.

5. We must take care to ensure that the package.json file is coded as follows:

"scripts": {
"build": "webpack --config webpack.config.js"
}

When using Webpack 5, you can access its binary version by running npx webpack in the CLI.

We should also decide which type of installation we need; any re-installation will overwrite the previous one, so don't worry if you have already followed the preceding steps.

6. Let's do that installation now, if applicable.

There are two types of installation:

• • Global: A global installation will lockdown your installation to a specific version of Webpack.
    The following npm installation will make Webpack available globally:

npm install --global webpack

• •  Local: A local installation will allow you to run Webpack in the project directory. This needs to be done via the npm script:

npm install webpack --save-dev

You will need to carry out all of the preceding steps every time you begin a new project on a new local machine. Once you have completed the installation, it is time to revert your attention to building a project.