Our own version of Webpack in <200 lines
Bundlers can be complicated, so to understand here's one in 200 lines.
/src-> application code
/compiler-> our compiler code
npm run start runs 3 commands:
npm cleandeletes the build bundle + manifest inside
npm compileruns our compiler which builds a bunde and manifest file
npm run start:serverstarts our basic express server which uses the bundle hash from manifest.
- Dependency graphs
- Recursive functions
- Defining our own import/export system
- AST code parsing
- AST code generation
- Pass by ref
How it works
Modules -> Compiler -> Assets
How this compiler works (and most other bundlers):
- Builds dependency graph from entry file - see
- Converts tree into a bundle, stores hash of contents - see
- Server file reads the resulting manifest for details of bundle hash and serves to browser - see
- We use ESM so it handles cyclic dependencies better than CJS (it does this due to its compile-time statis analysis feature).
- For simplicity we don't include non-js assets (e.g. images/css) or separate bundles (e.g. app/vendors).
Note about Webpack
This repo is designed to help understand the basics, there are many other features WP includes which this does not:
- non-js assets
- Dev and HMR
- Code splitting/cherry picking/tree shaking
- Dynamic imports
- Making it extensible or configurable
- Loaders, plugins or lifecycle