learn-webpack

A simple app to learn Webpack like a Boss!

running

npm install

// DEV
npm start 

// PROD
npm run build

things to achieve with Webpack

• Bundle all JavaScript. Meh
• Use Node server to do it, no webpack-dev-server
• Use Babel for ES6 and JSX
• Use Hot reloading. Yay!
• Generate index.html referencing all generated assets at build time
• Have source-maps to debug like a Boss!
• Have a sample app ready? Yay bundle.js is > 1MB, Optimize!
• Have CSS bundled in
• Hot reloading keeping the state intact, transforms!
• Show errors on browser, react-transform-catch-erros, Sir Dan Abramov!
• Generate Webpack conf for DEV and PROD
• Separate bundles for app and vendor
• Extract CSS separately
• Optimize bundle size (app: 299kB -> 23kB and vendor: 919kB -> 199kB)
  • Dedupe, reduces the bundle size a little > 0 :P
  • Minification [PROD only]
  • Define NODE_ENV=production for React, Redux and other library bundling improvements
• Hashing
• Long term caching
• Common chunking, zzzzzz
• Server rendered? Huhh?
• PostCSS, kill me now?
• Finally, clean the build folder, will you please?