Introducing Webpack Dashboard


How about a nice game of chess?

As a child, I always wanted to be a hacker. I remember the first time my father showed me how to dir /p. I thought I was hacking the planet. Then I grew up, and I realized the reality of it was a bit different. I still use the CLI all the time, but it’s far less glamorous in daily use than it had been portrayed in film & media during my childhood.

../../../../assets/uploads/2016/08/6568_1.jpg

But that doesn’t mean we still can’t have fun. I needed some command line nostalgia in my life, so I made it happen and I’m here to introduce Webpack Dashboard.

If you use webpack with regularity, specifically the webpack-dev-server or webpack-dev-middleware, you are probably used to seeing something like this:

../../../../assets/uploads/2016/08/webpack-dev-server.png

Now don’t get me wrong, its a great collection of information, but I’ve always found it to be hard to derive any useful information from it without waiting for it to finish and then scrolling upwards until I could find the information I wanted.

A while back, I came across a library called blessed, that lets you easily create command line interfaces for things like dashboards. I had tinkered with it, but didn’t really have a great dashboard idea. Until now. I realized this sort of thing would actually really help organize and intuitively display dev server output, so I created webpack-dashboard. Here is what your dev server output can look like now:

../../../../assets/uploads/2016/08/Screen-Shot-2016-08-14-at-2.17.27-PM.png

Check it out in action:

http://i.imgur.com/T23r06q.gif

For the initial release, we have the following features:

  • Log: Logs errors from the build process
  • Status: The status of the build process
  • Operation: The specific operation taking place in the build process
  • Progress: Live build progress
  • Modules: A list of your modules, their sizes and percentage of bundle size
  • Assets: A list of assets output from the build

So if you want to give it a spin, head on over to:

https://github.com/FormidableLabs/webpack-dashboard


We Are Formidable

Formidable is a Seattle-based consultancy and open source shop, with an emphasis on Node.js and React.js. We deploy a mixture of consulting, staff augmentation, and training to level up teams and solve engineering problems. Whether it’s transitioning walmart.com to React, moving speedtest.net off Flash, or helping a startup build and scale an MVP, we’re ready to help teams of any size.

Interested in hiring or working for us? Get in touch or view our careers page.