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 .…