Angular applications can use SystemJS to load application and library modules. However, there are alternatives that work just as well, specifically Webpack. SystemJS is often the popular choice, but it is important to understand the pros and cons of both SystemJS and Webpack so that we can make an informed choice. Here’s all you need.
We conducted research and made some observations. It would appear that the difference between the two module loaders is something that people really like to argue about.
- SystemJS is known to be quirky with dependencies that it uses for its own polyfill
- Importing libraries/modules from npm is not as simple as it is using WebPack
- Gulp is still required for:
- Envification (envify)
- Generating unique hashname for bundle file
- Changes are now shown in milliseconds; Webpack’s dev server is designed for speed. Not only does it support incremental builds, it serves directly from memory
- You can easily import libraries from npm (e.g. Bootstrap or Foundation) without worrying about their exact path within node_modules
- No need of gulp. Webpack itself takes care of doing all the tasks that require Gulp in SystemJS
- It appears that Webpack was designed from the ground-up for large applications and it shows in the development process
Both have their own pros and cons; it’s at the discretion of the developer to decide whether SystemJS or WebPack will suit the project at hand.