Webpack Explained: Bundling JavaScript for the Browser
Introduction Browsers used to load one script tag at a time, and every file was global — a recipe for name collisions and slow pages. Modern JavaScript uses modules (the JavaScript modules concept), but browsers historically couldn't resolve hundreds of module files efficiently, and they certainly couldn't import CSS or images. Webpack solved this by bundling: it starts from an entry point, follows every import, and produces a small number of optimised files a browser can load. Entry, output, and the dependency graph Webpack's core idea is the dependency graph: starting from your entry file, it recursively follows every import and require, building a complete map of what your application needs: // webpack.config.js module.exports = { entry: "./src/index.js", output: { filename: "bundle.js", path: __dirname + "/dist", }, }; Everything reachable from the entry ends up in the output; everything unreachable is left out (tree-shak...