Webpack is a program used in web development to optimize how websites are being built. It’s another topic for me to rant about just how bloated web development has become, and hence the development of Webpack.
Modules and Bundles
These Modules can form a dependency graph, and Webpack creates Bundles from this group of dependency Modules. Bundles are a collection of Modules that has been complied and optimized for execution.
Building a Bundle
The key to building a Bundle of dependent Modules is the Entry Point. Webpack starts at the entry point of the application, and builds a dependency graph by analyzing what files it imports, and files the imports import. It then takes all these files that are dependent on each other, and compiles them into a Bundle.
A web application may have multiple Entry Points, which may be the case of a multi-page application. For example, you may have a user, admin, and developer homepage, each showing different items. You therefore need to define these 3 entry points, so that Webpack is able to traverse through them and build their own dependency graph, and their Bundles.
Motivation for Webpack
Also, by pre-grouping the Modules dependencies into Bundles before hand, it speeds things up at the client end, as the client does not have to wait for all the dependencies to trickle down one by one. With Webpack, all the dependencies are compiled into a single file, and so only a single file needs to be downloaded.