JSPM vs WebPack for Angular 2 JSPM vs WebPack for Angular 2 angular angular

JSPM vs WebPack for Angular 2


This answer requires a breakdown as follows ..

SystemJS v JSPM

JSPM is essentially SystemJS with the advantage that JSPM configures your systemjs.config.js for you. I love JSPM when it works (which sadly isnt always).

The benefit here is that JSPM also bundles your JS files for you.

JSPM v Webpack

Given that JSPM is actually using SystemJS under the hood this question is essentially should we be using SystemJS or Webpack.

Not again! I've answered this before (top answer) here ..

What are differences between SystemJS and Webpack?

A brief repeat of that content is that Webpack does not replace SystemJS (or JSPM) it simply makes them redundant.

However, there is a twist here in that JSPM provides bundling. So why move to Webpack?

The benefit of JSPM is ease of configuration.

This same benefit is also its downfall, in that ease of configuration means lack of options and lack of options means lack of control.

Webpack not only bundles JS files, it also bundles CSS, HTML and everything else into a single bundle.js file which (once cached) makes Webpack apps lightning fast (but slow to load initially).

Also, JSPM satisfies the need for a bundler but how are you gonna transpile files with JSPM? e.g. If I wanna use Stylus instead of CSS whats gonna transpile my Stylus files to CSS? Am I gonna throw Gulp into the mix (which I am heartbroken about now has 1/3 of Webpack's download but was leading 6 months ago). Or switch to Webpack?

I am not a Webpack fan due to its poor docs but given that it has such a huge market share, I think we will all be jumping on the Webpack boat soon.