Module builders SystemJS vs Webpack
| No. | Webpack | SystemJs |
|---|---|---|
| 1 | Well matured | Based on draft module loader specifications, so it is subjected to change till it is finalized. |
| 2 | Importing new libraries/modules are fairly simple and easy with just import statements or require statements. | Need to mention the exact/correct path to external libraries or packages in systemjsconfig.js. Whenever the project folder structure changes, you need to update config with new location structure. |
| 3 | Webpack can handle any resources by adding proper loaders. e.g., css-loader, typscript-loader, style-loader, sass-loader etc., |
System JS doesn't come with default builder, so you have to either depend upon task runners like grunt or gulp tasks to perform the tasks. Update: SystemJs builder exists but it is still in its early stage and requires time to mature. |
| 4 | Official site is well maintained with links to all major loaders provided in the official site to avoid confusions |
Not much, you need to resort on StackOverflow for answers. |
| 5 | Webpack provides out of box feature which does ES6 modules - tree shaking |
Need to rely on rollup or such plugins to perform Tree Shaking |
| 6 |
For Angular development, you will find required amount of resources to kick start without pain. One such wonderful starter project link is provided below |
All official Angular examples are provided using SystemJs module builder. So it would be easier getting started with SystemJs + Angular.
A very good starter project using SystemJs and gulp based build system. |
| 7 | It has a built-in web development server, that can keep all generated dev. resources like css, js etc., in-memory and provides a faster development experience. |
Requires a build & run systems like grunt or gulp coupled with http-server for development. Currently, Angular CLI provides live server & reload features which can complement for development. |
| 8 |
Very well supported by open source community. It has a very good number of sponsors and backers. |
SystemJS is based on module system specifications drafted by W3C, so it needs some time to gain momentum to reach a matured level. |
| 9 |
Can use regular expressions while requiring an external module or resources. See example Context Replacement plugin for optimizing Moment.js |
Not supported |