How to Pack your Webpack
summary
Shows how to use typescript webpack config and turn the config into a function that reads NODE_ENV so builds default to production, recommends Babel + preset-typescript over ts-loader, and sets babel loader with cacheDirectory: true and include only src to avoid transpiling node_modules. Claims removing an unnecessary lint loader cuts a build from 40s → 12s. Teaches browserslist RC per env, dynamic imports with prefetch, CSS extraction (mini-css-extract / treat), measure with Lighthouse and check modules on bundlephobia.
AI-written summary · about
chapters (9)
- 0:00Intro
- 0:55Create the config
- 2:28Make the mode configurable.
- 4:29Set your entry
- 5:07Set your output
- 6:23Set up babel- loader
- 10:58Set up @babel/preset- env and use a .browserslistre
- 15:15Set up a CSS solution
- 17:51Configure bundle optimizations
related talks
58m10KB or Bust: The Delicate Power of Webpack and Babel
01h 03mIntroduction to webpack
35mSecret Tips to Improve Your Webpack Configuration
30mWebpack – The React Parts
28mWebpack for a better development workflow
27mThe Hitchhiker's Guide to the Webpack
52m10KB or Bust: The Delicate Power of Webpack and Babel
23mStreamline your code with webpack