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.

Webpack

vs

Grunt/Gulp/Browserify

?

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!