Webpack: The Web Module Bundler
Tags: javascript, react, learning, webdev
Published: 2024-03-02 10:20:05

## Introduction : 
**Webpack** is a tool that helps us to **_organize_** and **_bundle_** all our website's files (like JavaScript, CSS, images, etc.) into **one** or a few files. 

 

```
In simpler terms, Webpack is like a magic box that 
takes all our web development ingredients 
(.hbs, .cjs .html, .css, .js, .png, .jpg, etc) 
and turns them into a delicious cake 🍰
that browsers can easily consume.
```

**Webpack** is just allowed us to modularize our code as much as we want the way we like it to be, and finally webpack allows us to just push all of the code into one single file and that file is going to do everything. 

_We don't have to worry about the things like:_
- When should we load this module first, second or third?
- Import and export statement of writing in modern JS and Common JS.
- How SASS can be compile?

**Webpack** take care of everything for us.


## Setup Guide:
**_Step 1:_** 
We need to install [**Node.js**](https://nodejs.org/en), which includes **npm** (Node Package Manager). 
Download & Install it.


**_Step 2:_**
If we have to used **Webpack** from scratch then just create one folder and open it into a code editor.


**_Step 3:_**
Open **Terminal**, and run the below command, for creating the **_package.json_**

```
npm init -y
```


**_Step 4:_**
Now, we need to install two packages that is [**webpack**](https://www.npmjs.com/package/webpack) and [**webpack-cli**](https://www.npmjs.com/package/webpack-cli)
In Terminal, run the below command for installing this packages.

```
npm install webpack webpack-cli --save-dev
```


**_Step 5:_**
After Installing, create one file with a name: 

```
webpack.config.js
```

This file is responsible for running the **webpack services**, and we can modified it according to our needs.

```
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  module: {
    rules: [
      {
        test: "/.css$/i",
        use: ["style-loader", "css-loader"],
      },
      {
        test: "/.(js)$/",
        use: "babel-loader",
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  plugins: [new HtmlWebpackPlugin()],
};
```


Let's try to understand the **code** line by line which we have wrote in above file 👆.

<u>**1. entry: "index.js"**</u> :
This means, `"index.js"` is a entry point and it serve as a container for all the javascript code written across the application. 
**_For Example_**: In React, `"index.js"` file is the root file means it a parent component which contain all the child components.

<u>**2. module (rules)**</u> :
Module can set the rules, this means In our application we can used different **packages** and **libraries** which is not belonging our browser, now we need to make sure that each and everything which we wrote in our code, browser can be understood easily, so loader played the main role for finding the things and applying the specific loader on it.

Here, we are using `"style-loader"` and `"css-loader"`, so whenever **webpack** find any **css file**, it applied this two loader one by one on it to process the styling part for the browser.

Now, not all browser support the **Modern JS**, so we can used `"babel-loader"`, it just find the JS file and convert all the modern syntax code into `common js` code syntax, so any browser can easily grab and support the JS code.

<u>**3. output**</u> :
Okay, whatever the processed we did till now, we need to show them, otherwise it all waste. So, **webpack** just create a `"dist"` folder and inside that also create `"bundle.js"` file which contain all the JS code of the application but in `common-js` format.

<u>**4. plugins**</u> :
We used **HtmlWebpackPlugin**, this simply create a new html file `"index.html"` inside the `"dist"` folder and also integrate the `"bundle.js"` file in it. So, this html file is responsible for rendering all the code and showing the result on the browser.

**_Step 6:_**
Now, Once _webpack configuration_ is done, we need to make a little changes in **`package.json`** file.
Here, inside the `"scripts"` object: 

```
"scripts": {
    "build": "webpack",
}
```

Just add this build line.

**_Step 7:_**
Now, whenever we run **`"npm run build"`** command in a terminal what actually happened behind the scenes is: 
**NodeJs** will run the `"webpack"` command which is `"webpack-cli"`, and now it will find the webpack configuration file and execute all the code line by line, 
So, it got the `"index.js"` file first and trying to execute them, then if they find any `"css"` file it try to run the loader to make it available for browser then is there any `"modern JS"` code, then run the `"babel-loader"` so it will convert code into `"common js"` and after all it just create `"dist"` folder for the final result 🤗.


Thats all about **Webpack Basic**, there are lots of feature of webpack, You can check here: https://webpack.js.org/