Earlier with Grunt and Gulp one had to do a lot of manual work to achieve the same output. So, Webpack solves the hard part. Webpack’s approach is more involved and it comes with a learning curve as it relies on configuration and looks very different than other tools. Webpack boasts a bunch of features:
- Ability to inject CSS files from your JS – useful if one is creating web components and want the CSS to be bundled with the JS.
- Flexible module patterns – you can use CommonJS style, ES6, or AMD.
- Ability to recompile only the module that we change, so a faster development cycle.
- If we use ReactJS, hot reloading modules using react-hot-loader. This feature speeds up the development quite a bit.
- It has its own command line utility, so we don’t need to use gulp or Grunt, though we can if we want.