3.3.2.1 Webpack Modules

Node.js has supported modular programming almost since its inception. On the web, however, support for modules has been slow to arrive. Multiple tools exist that support modular JavaScript on the web, with a variety of benefits and limitations. webpack builds on lessons learned from these systems and applies the concept of modules to any file in your project.

In contrast to Node.js modules, webpack modules can express their dependencies in a variety of ways. webpack supports to following module types natively:

ES Modules

An ‘ES2015’ import statement

CommonJS Modules

A ‘CommonJS’ require() statement

AMD Modules

An ‘AMD’ define and require statement

WebAssembly Modules

An ‘@import’ statement inside of a css/sass/less file.

Assets

An image url in a stylesheet url(...) or HTML ‘<img src’…>= file.

1. Loaders

   webpack supports modules written in a variety of languages and preprocessors via loaders. Loaders describe to webpack how to process non-native modules and include these dependencies into your bundles. The webpack community has built loaders for a wide variety of popular languages and language processors, including:

   • CoffeeScript
   • TypeScript
   • ESNext (Babel)
   • Sass
   • Less
   • Stylus
   • Elm