Webpack

What is Webpack? Webpack is a static module bundler for JavaScript applications. It takes your source files — JS, CSS, images, fonts — and bundles them into optimized output files the browser can load. One-liner: Webpack walks your dependency graph, transforms every file type it encounters (via loaders), and emits optimized bundles (via plugins). Why Do We Need It? The Real Root Problem: Browsers Have No Module System Before ES Modules (ES2015), the browser had one shared global scope for all JavaScript. Every <script> tag dumped its variables into window. <!-- All three files share window — one global scope --> <script src="utils.js"></script> <!-- defines window.helper --> <script src="lodash.js"></script> <!-- also defines window._ --> <script src="app.js"></script> <!-- must load last or it breaks --> What this means in practice: // utils.js var data = []; // window.data — global // vendor.js (some third-party lib) v