Gift Wrap Your Code with Webpack
summary
Webpack packages JavaScript, CSS, images and JSON into a single deployable bundle by building a dependency graph and applying loaders (css, style, babel) to transform assets; source maps and a dev server give live reload and debuggable code. Two small demos—a grocery page and a todo page—show ES2015 imports working, moment pulling in many locales inflating bundle size, and fixes: mark moment as external or extract shared code with the commons chunk plugin to shrink outputs, and the demos run.
AI-written summary · about
chapters (12)
- 0:00Start
- 3:23Dependency Graph
- 4:11Expressing Dependencies
- 9:47Amd Syntax
- 14:25Loaders
- 15:27A Web Pack Configuration File
- 19:20Show the Css
- 21:23Babel Loader
- 30:12Image in Lining
- 30:51Library Output
- 31:29Testing
- 31:56Resources
related talks
45mDark Art of Webpack Bundle Tuning
17mBundling your Front-End with webpack
23mStreamline your code with webpack
30mWebpack – The React Parts
01h 03mIntroduction to webpack
28mWebpack for a better development workflow
19mMaking front end modules actually work
58m10KB or Bust: The Delicate Power of Webpack and Babel