https://github.com/craigtaub/our-own-webpack
Our own version of Webpack in <200 lines
https://github.com/craigtaub/our-own-webpack
ast dependency-graphs esm webpack
Last synced: 4 months ago
JSON representation
Our own version of Webpack in <200 lines
- Host: GitHub
- URL: https://github.com/craigtaub/our-own-webpack
- Owner: craigtaub
- Created: 2020-02-07T21:50:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T23:48:52.000Z (over 3 years ago)
- Last Synced: 2025-07-12T17:43:25.536Z (11 months ago)
- Topics: ast, dependency-graphs, esm, webpack
- Language: JavaScript
- Homepage: https://craigtaub.dev/under-the-hood-of-web-bundlers
- Size: 59.6 KB
- Stars: 28
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
## To run
`npm run start` runs 3 commands:
1. `npm clean` deletes the build bundle + manifest inside `build`
2. `npm compile` runs our compiler which builds a bunde and manifest file
3. `npm run start:server` starts our basic express server which uses the bundle hash from manifest.
## Concepts
- IIFE
- Dependency graphs
- Recursive functions
- Defining our own import/export system
- ESM
- AST code parsing
- AST code generation
- Hashing
- Pass by ref
## How it works
### Basic architecture:
Modules -> Compiler -> Assets
### How this compiler works (and most other bundlers):
1. Builds dependency graph from entry file - see `compiler/deps_graph.mjs`
2. Converts tree into a bundle, stores hash of contents - see `compiler/transform.mjs`.
3. Server file reads the resulting manifest for details of bundle hash and serves to browser - see `server.mjs`
#### Additional
- 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