Why WebPack is Eating Grunt’s Lunch

Front-end development is changing rapidly. Keeping up with the most effective tools can be quite challenging. If you’re running a complex app, you’re bouncing between multiple CSS libraries and frameworks. With a simple, consistent way to bundle these assets, you can save time (and resources) on development and maintenance.

Introducing Webpack

Please meet webpack, an open-source, static Javascript module bundler. This tool supports assets such as images, fonts and stylesheets - all with just one system. It’s primarily intended for JavaScript applications, such as anything you would be building with Angular, React or Vue, etc.

Webpack’s initial release came out in 2012, so this is not a new tool. However, the rise of front-end frameworks is prompting webpack to enjoy a steady growth.

Your Configuration, Automated

Prior to webpack, you would likely have used Grunt or Gulp as your task runners for processing your Sass into minified CSS and Typescript into browser-compatible JavaScript. You would have needed to configure the tasks, and keep an eye on the directories to figure out where you’re storing those assets. And anytime something changed while you were working on it, Grunt or Gulp would have automatically run a task configured for that particular file type.

Webpack, on the other hand, functions more cohesively with your application. You point it at your JavaScript application (essentially the entry point to your application), and webpack will go through the JavaScript, analyze what needs to be done, and build the static assets into a folder that you can deploy to your production server. All without the grunt work for you — all pun intended.

The Raw Power of Open Source

Webpack is specifically tailored for JavaScript applications, unlike the freeform concepts of Grunt or Gulp. You can truly set the system up to function however you would like, or use the out-of-the-box configuration. The community has refined the tooling over the last several years to the point of true functionality from an initial install, while still allowing developers to tweak its behavior as needed.

Being an open source tool, there is a good chance someone out there has already gone through the same hurdles you are having - and has posted some help documentation around it. When we initially implemented webpack on a Plone site, we ran into a few obstacles. However a quick search determined that someone had already published a workaround, which saved us a ton of time. So do some research if you get stuck.

Getting Started with Webpack

Before you get started, read the documentation. There are great examples and use cases available to help understand the concepts.

Another piece of advice, if you can manage: you’ll need to toss out your old way of thinking and embrace the future of automated bundling. Whereas Grunt and Gulp follow a recipe of steps you have written in order to build your assets, webpack is “smarter”. It can include optimizations like leaving unused code out of the bundle and splitting code into separate bundles so only the code that is needed is downloaded.

WebPack’s Outlook

Webpack has been a consistent system over its lifespan. Despite the rapid change we’re seeing in the Javascript application framework space, webpack is now the backbone to all of these systems with no end in sight. webpack is a solid investment in a simple module bundler for your web application.

Are You Lovin’ It?

If you’ve liked using webpack and have a suggestion on how to improve it: contribute! Webpack is an Open Collective funding model, and you can support the project through pull requests, maintaining documentation, and sponsoring the development of new features.

Have a question? Need help? Let us know; we are happy to help.