The JS bundle problem
In 2013 frontend JavaScript was moving from sequential <script> tags to organised modules (CommonJS, AMD, ES Modules draft). A tool was needed to:
- Resolve module dependencies
- Generate a production-optimised single-file bundle
- Apply transformations (Babel, Sass, optimised images)
- Support code splitting for on-demand asset loading
Browserify (2011) and RequireJS covered some cases but had limits. Webpack, developed by Tobias Koppers in Germany from 2012, covers all this with an “everything is a module” architecture.
Version 1.0 is released on 21 February 2014. MIT licence.
Key concepts
- Entry — dependency graph entry point
- Output — generated bundle
- Loaders — transform non-JS files (CSS, PNG, TypeScript) into JS modules
- Plugins — extend the build process
- Code splitting — chunk lazy loading
- HMR (Hot Module Replacement) — module update without reload
Impact
Webpack is enabling React, Angular and the emerging SPA frameworks: it is bound to become the de facto standard in scaffolding tools over the coming years.
References: Webpack 1.0 (21 February 2014). Tobias Koppers, Sokra. MIT licence. Loader and plugin ecosystem.