Il problema del bundle JS
Nel 2013 il JavaScript frontend stava passando da <script> multipli caricati in sequenza a moduli organizzati (CommonJS, AMD, ES Modules draft). Serviva uno strumento che:
- Risolvesse dipendenze tra moduli
- Generasse un bundle single-file ottimizzato per produzione
- Applicasse trasformazioni (Babel, Sass, immagini ottimizzate)
- Supportasse code splitting per caricare asset on-demand
Browserify (2011) e RequireJS coprivano alcuni casi ma avevano limiti. Webpack, sviluppato da Tobias Koppers in Germania dal 2012, copre tutto questo con architettura “everything is a module”.
La versione 1.0 viene rilasciata il 21 febbraio 2014. Licenza MIT.
Concetti chiave
- Entry — punto di ingresso del grafo dipendenze
- Output — bundle generato
- Loaders — trasformano file non-JS (CSS, PNG, TypeScript) in moduli JS
- Plugins — estendono il processo di build
- Code splitting — lazy loading di chunk
- HMR (Hot Module Replacement) — update del modulo senza reload
Impatto
Webpack abilita React, Vue, Angular e tutti i framework SPA moderni. Diventa standard di fatto nei framework di scaffolding (create-react-app, Vue CLI). Rimarrà dominante fino all’arrivo di Vite (2021) e esbuild (2020) che introducono bundler più veloci.
Riferimenti: Webpack 1.0 (21 febbraio 2014). Tobias Koppers, Sokra. Licenza MIT. Evoluzione: webpack 5 (2020). Ecosistema loaders e plugins.