With the rise of Javascript only applications, the tools needed for developers have been evolving. Angularjs / Reactjs applications may involve use of multiple sources including third-party JS libraries. When a developer uses multiple such bundles, she also needs to ensure that all dependent modules are tracked correctly and made available for the production use. This task is facilitated by something called module bundler. Webpack is one such bundler, which will learn more about today.
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.
[Source: https://webpack.js.org/concepts/dependency-graph/]
Key Concepts:
- 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.
- Loaders: Define loaders as per the need to process non-javascript files.
- 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.
Related Links:
Related Keywords: