Getting started with Webpack: An Introduction
If you are a Intermediate Web developer then it is highly possible that you might have heard about Webpack. Well in case you haven’t then worry not because by the end of this Article you will have just the required amount of knowledge to get started with this modern bundling tool.
You might wonder that there are hundreds of tools for developing your Web-apps then why was just some another tool like Webpack created in the first place, to know the answer to this question we need to go 20 years back in time to the initial years of Internet. Those times where Websites were nothing more than plain HTML, CSS, JavaScript files.
What was the problem then?
The entire development community was involved in a constant quest of improving the overall user and developer experience around using and building Javascript/web applications. Therefore, there were a lot of new libraries and frameworks introduced.
Websites before were no more just a small package with an odd number of files in them. They stated getting bulky, with the introduction of JavaScript modules, as writing encapsulated small chunks of code was the new trend.
Eventually all of this lead to a situation where we had twice the size of files in the overall application package.
Not only was the overall size of the application a challenge, but also there was a huge gap in the kind of code developers were writing and the kind of code browsers could understand. Helper code called polyfills were used by developers to ensure the browsers were able to understand the code in their packages.
To answer these issues, Webpack was created. Webpack is a static module bundler.
So how was Webpack the solution to this problem?
In brief, Webpack goes through your package and creates what it calls a dependency graph which consists of various modules which your webapp would require to function as expected. Then, using this graph, it creates a new package which consists of the very bare minimum number of files required, often just a single bundle.js file which can be plugged in to the html file easily and used for the application.
All in all we can say that Webpack takes chunk of required information from all the files present in the application and puts them into a package in the build version of the application when we deploy it.
Features :-
Webpack can perform many operations. For example:
1. Convert your files from es6 to es5
2. Convert your .less or .scss files to regular .css
3. Minifies your files (reduces file size)
4. Removes all comments from all files (to reduce file size)
5. Place all your code in one .js file
6. Collect all your .css bundles into one file
Conclusion :-
Guess now you have the required knowledge to get started with Webpack and use it in your next dream project. We have swiftly skimmed through the basic features of Webpack and how it works behind the scenes, but I know the basic webpack config setup is still remaining for which you can directly move on to these awesome tutorials from here,
And if you are well-versed with the basic concepts and setup then you can move on to this detailed Webpack tutorial by freeCodeCamp :-
Hope that Helps, Thanks for Reading:)
