#3 Let’s understand WEBPACK !!!

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.

Mode

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

Mode

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=development
module.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: —

Webpack

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.

Minification

👉 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.

Reference

• Github Link for mode
• Mode
• Why Webpack?

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