Okay, So I assume that you have come across this term Webpack or Perhaps it was mentioned in one of the jobs description(mostly in Js projs)…….!
What problem does Webpack solve?
If you are a Javascript developer you could have used a lot of new libraries(loadash, Axios, etc) and frameworks(React, Vue, Angular, etc). Imagine you are working on a project that requires a lot of libraries to use, you will use them through require or latest ES6 import statements into your project and these are stored under the Node Modules folder.
- Size of the application and Performance: With the introduction of JavaScript modules, the overall size of the application will be huge and becomes a challenge. Eventually, it will affect the performance of your application.
- Dependencies Management: It is hard to keep track of dependencies between different JavaScript files. For example, if you have a file print.js where you have defined a function or a class Print and another file app.js where you plan to use the class, you must include the files in your HTML file in the correct order like( because app.js depends on square.js.):
To answer these issues, Webpack was created. Webpack is a static module bundler that takes multiples files(JS, CSS, SCSS, Images, React, etc..) and packs them together into a single file ( bundle.js)
Literally, It was adopted in most of the companies (Ex: Walmart, Flipkart, etc )
How Webpack works behind the scenes 🧑🏻💻?
Webpack goes through your package and creates what it calls a Dependency graph traversal algorithm which consists of various modules which your web app would require to function as expected. It starts from a list of modules defined on the command line or in its configuration file. then bundles all of those modules into a small number of bundles — often, just one — to be loaded by the browser and it can be plugged into the HTML file easily and used for the application.
This has been a high-level overview of Webpack. To learn how to actually setup and configure your project with Webpack, you’ll next need to understand the 5 core concepts of Webpack — entry, output, loaders, and plugins and presets. You’ll write your own configuration file (named webpack.config.js). You’ll learn to how to take full control of your project’s development in case if you want add some new resources and teach webpack how to handle them..
Configuration article will be added soon….
