Webpack: The Web Module Bundler

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, 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 and 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 👆.

1. entry: "index.js" :
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.

2. module (rules) :
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.

3. output :
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.

4. plugins :
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/