Journey to webpack

For the last few weeks, my team and I have been integrating webpack into our development/build process. Our 3 year old AngularJS application consists of over 5,000 files of mixed Javascript, TypeScript, sass, less and css. Currently Grunt does most of the building and we use Karma and PhantomJS for testing.

Our goal is to improve a slowly our rotting developer experience and pave the way to move to the latest version of Angular. We want faster running tests, quicker live reloading, better library management and proper code splitting.

This is our story.

  1. An introduction
    • why are we here? where are we?
  2. Baby steps
    • expose-loader, imports-loader, exports-loader
  3. Dealing with 3rd party libraries
    • moment, fastclick, angular, lodash, d3, highcharts, log4javascript, isotope, phoneformat, intl-tel-input
  4. Handling shared components (aka 2nd party libraries)
    • using [name] substitutions in output
  5. Miscellaneous
    • uglification, source maps, split dev & prod, helper files, ng-upgrade, CommonChunksPlugin, BundleAnalyzerPlugin
  6. Moment
    • integrating with Moment.js without losing your mind
  7. Bundling AngularJS without editing thousands of files
  8. More coming! Stay tuned