What is Webpack?
As mentioned above, webpack is a tool to bundle various modules together. This highly configurable tool allows developers to specify the entry point for their application (one or more) and then it builds dependencies by traversing all the referenced assets. This dependency graph is then used to build one or more bundles as per the configuration.
By default, webpack supports only JS files. That is it can build dependency for JS files only. However, there are custom loaders available, which could be used to process other assets such as CSS as well.
How does it work?
When webpack processes your application, it starts from a list of modules defined on the command line or in its config file. Starting from these entry points, webpack recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles – often, just one – to be loaded by the browser.
- Entry: Define one or more entry points, which will be used to build the dependency graph.
- Output: Define one or more filenames for final bundles.
- Plugins: Add plugins which make the bundling easier further. E.g. you can choose a plugin that creates a separate bundle for all the common code. This results in reducing the page load times.