Webpack and Vite Bundling

A bundle is an output file produced by a bundler that combines numerous source modules and their dependencies into one or a few files the browser can load efficiently. Bundling reduces the number of network requests and resolves the module graph at build time. Tools like Webpack create bundles by following import statements from an entry point. Modern setups split bundles into smaller chunks for caching and lazy loading, so users download only the code a given page needs.

A loader in Webpack transforms a non-JavaScript file (or a newer JS syntax) into a module Webpack can process. For example, babel-loader transpiles modern JavaScript, css-loader resolves @import and url(), and ts-loader compiles TypeScript. Loaders run on a per-file basis and can be chained, each receiving the previous one's output. They let Webpack treat virtually any asset, like styles, images, or fonts, as part of the dependency graph rather than handling only plain JavaScript.

A plugin extends a bundler by tapping into its build lifecycle to perform tasks that loaders cannot, since loaders work per-file while plugins act across the whole compilation. Examples include generating an HTML file, extracting CSS into separate files, defining environment variables, or analyzing bundle size. In Webpack, plugins are instances of classes that register hooks on the compiler. They provide the flexible, powerful layer that customizes output, optimizes assets, and integrates the build with other tooling.

Tree-shaking is dead-code elimination for ES modules: the bundler statically analyzes import and export statements to determine which exports are actually used, then omits the unused ones from the output. The name evokes shaking a tree so dead leaves fall off. It relies on the static structure of ES modules, so import and export must be used rather than dynamic require. Marking packages as side-effect-free helps bundlers shake more aggressively, shrinking bundle size and improving load performance.

Hot Module Replacement updates modules in a running application during development without a full page refresh, preserving application state such as form input or scroll position. When you save a file, the dev server pushes only the changed module to the browser, which swaps it in place. Vite leverages native ES modules for near-instant HMR, while Webpack uses its dev server. HMR dramatically speeds up the feedback loop, letting you see edits reflected almost immediately while keeping the app's current context intact.