Unbundling the JavaScript module bundler
summary
Shows how a tiny JavaScript tool (under 200 lines on GitHub) downloads listed vendor URLs, caches them, concatenates and minifies with Babel minify to drop seven HTTP requests to two. Explains module systems (global, CommonJS, AMD, UMD, ES2015), demonstrates building the dependency graph, and the bundler pattern that produces a module map factory pattern where modules become factory functions and a rewritten require loads them. Covers Webpack usage, loaders, plugins, and tree shaking, and how Webpack CLI runs with mode=development to reveal the bundle shape.
AI-written summary · about
chapters (10)
- 0:00Introduction and context
- 2:02Understanding module bundlers
- 3:06Building a simple bundler
- 7:12What is a module?
- 9:21JavaScript module patterns
- 14:40CommonJS and module systems
- 17:39Static vs dynamic imports
- 24:18How bundlers work
- 30:57Introduction to Webpack
- 35:59Conclusion
related talks
40mBuild Your Own webpack (Live Coding an Ultra-Simplified Example of a Modern Module Bundler in JavaScript)
19mMaking front end modules actually work
58m10KB or Bust: The Delicate Power of Webpack and Babel
51mUnpacking Bundling
17mBundling your Front-End with webpack
26mBundlers a deep dive into modern JavaScript build tools
30mPackWars: Webpack vs Browserify vs SystemJS vs require.js
46mIn this JavaScript tooling jungle, a return to simplicity is...