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 enables React, Vue, Angular and all modern SPA frameworks. Becomes de facto standard in framework scaffolding (create-react-app, Vue CLI). Will remain dominant until the arrival of Vite (2021) and esbuild (2020) which introduce faster bundlers.
References: Webpack 1.0 (21 February 2014). Tobias Koppers, Sokra. MIT licence. Evolution: webpack 5 (2020). Loader and plugin ecosystem.