#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.
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=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.
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
