Webpack hands-on training

Why do we need a build step?

  • code size
  • assets size
  • code splitting
  • transpilation
  • debuging methods
  • code quality
  • optimisations
  • environment specific tasks
  • etc.





Two things you should keep in mind

  1. Install your dependencies threw NPM  (good riddance BowerJS)
  2. Use a Module System

Modules in JavaScript

Module Pattern (Anywhere)


AMD ( Webpack, RequireJS)


CommonJS (Webpack, Nodejs, Browserify)


ES Modules (Webpack 2 beta)


What's the purpose of this?

  1. understanding a webpack configuration file
  2. how to integrate webpack with your project
  3. build for multiple enviroments
  4. having to know and play with webpack

ok enough... let's code!