When Webpack processes your application, it builds a dependency graph which maps out the modules that your project needs and generates one or more bundles. A bundle is a distinct grouping of connected code that has been compiled and transformed for the browser.
If one file depends on another (it uses the code from a separate file), Webpack treats this as a dependency. Webpack also takes your non-code assets (images, fonts, styles, etc.) and converts them to dependencies for your application.
Since version 4.0.0, webpack does not require a configuration file to bundle your project. Nevertheless, it is incredibly configurable to better fit your needs.
To get started you only need to understand its Core Concepts:
- Browser Compatibility
This document is intended to give a high-level overview of these concepts, while providing links to detailed concept-specific use cases.
For a better understanding of the ideas behind module bundlers and how they work under the hood, consult these resources:
- Manually Bundling an Application
- Live Coding a Simple Module Bundler
- Detailed Explanation of a Simple Module Bundler