Before we can begin bundling our web sites/applications using webpack, we need to install Node.js due to its role as a runtime environment for JavaScript. It also provides the Node Package Manager (npm), a powerful tool for managing project dependencies and installing third-party packages, which is crucial for building applications that leverage various libraries and modules.

✅ Installing Node.js

To install Node.js on your system, follow these steps:

1. Visit the official Node.js website at https://nodejs.org in your web browser.
2. On the homepage, you will see two versions available for download: "LTS" (Long-Term Support) and "Current." It is recommended to choose the LTS version for stability and long-term support unless you have specific requirements for the current version.
3. Click on the download button for your operating system. Node.js supports various operating systems such as Windows, macOS, and Linux.
4. Once the download is complete, locate the installer file and run it.
5. Follow the installation wizard's instructions and accept the default settings unless you have specific preferences to configure.
6. After the installation is complete, open a new terminal or command prompt window.
7. To verify the installation, run the following command:

node -v

This command will display the installed Node.js version. Additionally, you can run npm -v to check the version of npm (Node Package Manager) installed.

<aside> 💡 I will be using pnpm throughout this entire tutorial. However you can choose any package manager of your choice.

</aside>

To create the package.json file, we can use a package manager such as npm or pnpm and run the init command. Once we have answered a few questions about our project, the package manager will generate a package.json file for us.

Let's start by creating a package.json file using pnpm.

mkdir webpack-mastery
cd webpack-mastery
pnpm init

Now we will install webpack. webpack is a powerful tool that allows us to bundle our code and manage dependencies efficiently. By using webpack, we can create a more organized and optimized development environment. Once we have installed webpack, we can start writing our configuration files.

These configuration files will define how our application is built and compiled. We can specify which files to include, how they are processed, and how they are output. With webpack, we have the flexibility to customize our build process to meet our specific needs. So, let's get started by installing webpack!

pnpm add -D webpack webpack-cli

This command will add webpack and webpack-cli as development dependencies in your project. The -D flag indicates that these packages should be installed as devDependencies, which are only required during the development process.