Skip to content

craigtaub/our-own-webpack

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

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

Releases

No releases published

Packages

No packages published