On this page

In modular programming, developers split programs into discrete, self-contained chunks of functionality called modules.

Each module covers a smaller surface area than the program as a whole, which makes verification, debugging, and testing far simpler. Well-written modules offer solid abstractions and clear encapsulation boundaries, so every module has a coherent design and a clear purpose within the larger application.

Node.js has supported modular programming almost since its inception. On the web, however, support for modules was slow to arrive. A number of tools sprang up to bring modular JavaScript to the browser, each with its own benefits and limitations. webpack builds on the lessons learned from those systems and applies the concept of modules to any file in your project.

Unlike Node.js modules, webpack modules can express their dependencies in several different ways. A few examples:

  • An ES2015 import statement
  • A CommonJS require() statement
  • An AMD define and require statement
  • An @import statement inside a CSS, Sass, or Less file
  • An image URL in a stylesheet (url(...)) or in an HTML <img src=...> element

webpack supports the following module types natively:

Beyond these, webpack supports modules written in many other languages and preprocessors through loaders. Loaders tell webpack how to process non-native modules and how to include their dependencies in your bundles. The webpack community has built loaders for a wide range of popular languages and language processors, including:

And many more. In short, webpack offers a powerful, rich API for customization that lets you use it with any stack while remaining non-opinionated about your development, testing, and production workflows.

For a complete list, see the list of loaders or learn how to write your own.