“Webpack” a powerful module bundler, which is common JavaScript file that combine html data, css data, javascript data etc in common file together and should be served to the client in a response to a single file request. It takes in a bunch of assets (ie. source, images, markup, CSS, …) and turns that into something you can provide to the client. WEBPACK supports advanced functionality such as hot module reloading (instant updates of React components without refresh), lazy loading (load bundles as one’s need), bundle splitting (separate app/vendor bundles), hashing (to bust cache) and source maps (so it’s easy to debug minified versions). Webpack solves fundamental problem of web development very well. It seems that people are pushing common build related concerns to tooling hiding the current complexity.
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.