About
A bundler is a web build tool that
- from a javascript entry file
- get all dependent files
- performs the build operations configured.
- and outputs only one file: the bundle
Example
- A math module
// math.js
export function add(a, b) {
return a + b;
}
- The app entry point
// app.js
import { add } from './math.js';
console.log(add(2, 2)); // 4
Example of Bundle with the entry point being app.js (without any size reduction)
function add(a, b) {
return a + b;
}
console.log(add(2, 2)); // 4
Features
They may allow:
- multiple entry points
- an HTML as entry point
- a css file as entry point
but the goal remains the same:
- they takes a lot of file
- and outputs less files (generally one but they may output more than one due to code splitting)
Bundler vs Task Runner
The difference with a task runner is that they work on the file tree (dependency graph) and not on a list of files
task runner can still bundle but only on a collection of file, not based on a dependency tree
List
- Webpack used by React (34000)
- https://esbuild.github.io/ (used by remix built in go)
- parcel (13141)
- Rollup used by Vite