Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it can also transform, bundle, or package just about any resource or asset. Webpack takes modules with dependencies and generates static assets representing those modules. Webpack enables extensibility and promotes best practices in web architecture and performance.
Introduction
Webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it can also transform, bundle, or package just about any resource or asset.
TL;DR
- Bundles ES Modules, CommonJS, and AMD modules (even combined).
- Can create a single bundle or multiple chunks that are asynchronously loaded at runtime (to reduce initial loading time).
- Dependencies are resolved during compilation, reducing the runtime size.
- Loaders can preprocess files while compiling, e.g., TypeScript to JavaScript, Handlebars strings to compiled functions, images to Base64, etc.
- Highly modular plugin system to do whatever else your application requires.
Get Started
Check out webpack's quick Get Started guide and the other guides.
Browser Compatibility
Webpack supports all browsers that are ES5-compliant (IE8 and below are not supported).
Webpack also needs Promise for import() and require.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.
Support
Webpack Open Collective - Help support the teams' ongoing development efforts.
Community
Webpack Examples
Webpack Examples - Examples of common Webpack functionality.
