An introduction to Webpack


After working for years with Grunt and Gulp, I decided it was about time to have a look at Webpack.

Webpack is a bundler, as opposed to a task runner. It was first introduced mainly for Javascript development but has finally become a replacement for tools such as Gulp or Grunt, as it can do what they do pretty well, including minification and sourcemaps out of the box. It took me a while to figure out a few things, but I got it to a point now where it does pretty much everything I need.

One thing I really like about it is how it figures things out and moves assets automatically. For example, it can moves fonts and icons from your node_modules or bower_components folders just by reading your scss file. I also find the hashing very efficient and easy to setup.

In the end, for my usage, it's not necessarly better than Gulp, just different, with pros and cons. I setup a quick template if you're interested: