#3 Let’s understand WEBPACK !!!

Abhishek Kovuri
3 min readNov 9, 2022

Mode & Why Webpack?

Hello Everyone, Welcome to my blog 🙏.
I hope you are all safe and that this blog finds you in good health ❤️.

In my previous blog, we have learnt about

💥 Webpack.
💥 Webpack working.
💥 Core Concepts of Webpack — Entry & Output.
💥 Core Concepts of Webpack — Loaders & Plugins.

If you missed it, please check it out here.


In this blog, Let’s learn about other core concepts of
Webpack — Mode
Why Webpack?


In simple words, it is the name of your environment.
mode: none | development | production

How is it helpful to Webpack?
With its help, you can configure build-related optimisations or some additional functionalities. You can configure the mode in two ways.

  • Through Configuration
  • Through CLI (Command Line Interface)

let’s see it in an example snippet:

In the CLI, webpack --mode=developmentmodule.exports = (args) {
devtool: args.mode === 'development' ? 'eval-source-map
' : ''

Note:- If you don’t specify the mode, it falls back to ‘production’ mode.

Why Webpack?

Webpack is a great tool that holds the architecture of your website by producing a single file. It glues all your modules together and leverages awesome developer experience.

Some of the key aspects that demand us to use Webpack are: —


Dependency Graph

Webpack creates a dependency graph by itself of your application.
For example: If script A is dependent on script B, Webpack will download Script B and then Script A. This can be made with the help of imports & exports of different modules and then it creates a dependency graph.

Scope Management

👉 Webpack relies on IIFE to handle the variable scoping which means it maintains individual scopes for every module.
👉 This eventually makes us not worry about the Variable Scope.


👉 As already mentioned Webpack clubs all your Javascript files into one single bundle that attaches to the HTML file.
👉Webpack uses plugins to link your Bundled file to the HTML.

Supports CommonJS

👉 Most browsers don’t support CommonJS modules but, by using Webpack with the help of External plugins we can still use CommonJS and make it compatible with any browser.
👉 Webpack made Imports & exports very easy in Web development as it accommodates commonJS way of coding.


Here we go, That’s it folks for this blog.
I hope everyone liked this blog.
If you like it, give it a clap 👏 ,
and share it with your friend.

For more exciting content on Frontend, Please do follow me 🎯.

Thanks a lot, Everyone 🙏.
Until Next time,
Happy Learning ✍️

Abhishek Kovuri, UI developer