Pavan has been building Frontend applications for close to 15 years. In this time he has used a variety of technologies, tools and platforms ranging from Java, .Net/WPF to iOS/macOS and of course the Web platform. For the past 8 years he has been building large scale financial apps for some of the big names on the Wall St. Most of his focus these days is on Angular (1.x, 2.x), React, Node.js and a variety of client-side tools and libraries.

Pavan is also a published author of WPF Control Development Unleashed, was Microsoft MVP for Client App Dev (2008-2011) and is the creator of QuickLens, a Mac App for UI Designers/Developers. He also likes to write articles and create videos courses at Tuts+.

He loves to spend his free time playing Ping Pong or sketching on his iPad Pro :-)

Overview of Webpack, a module bundler

Webpack has been a popular module bundler and has taken over grunt and gulp as the default build tool for packing front-end assets. There is a good reason for that: it simplifies many of the tasks that you normally have to do when creating a front-end setup, such as:

  • Bundling all JS files into one bundle
  • Minifying, uglifying the JS and CSS
  • Transpiling between source languages: TS => JS, ES2015+ => JS, SCSS => JS, etc
  • Live reloading browser after changes to source files
  • Shimming, aliasing global variables
  • Creating different configurations for dev/prod/test
  • and so on…

In this talk we will cover the basics of Webpack and do some simple configuration to setup a React/Angular project. We will look at the various plugins and loaders that makeup a standard configuration. By the end of this talk, you will have the confidence to do your own front-end build setups!