Introducing Electron Webpack Dashboard

Everything is magic, except to the magician.

One year ago yesterday, I released webpack-dashboard. It ended up getting a lot more popular than I thought it would! As it turns out, everyone wants to pretend like they are working at NASA.

Shortly after releasing it, and selling it under the guise of it feeling like working at NASA, I came to find out that NASA actually has their own dashboard lib, and it’s a lot better than mine. Check it out here:

One interesting thing about their dashboard though, is that it is web based. So that, coupled with a TON of frustration trying to make the terminal dashboard work on the incredible variety of terminal environments, led me to create an Electron, web-tech based version. Think less 50’s NASA, and more Westworld.

I tweeted some teasers and people seemed pretty excited, so I stayed up until 3:30am the last few nights and got a beta version ready to put out. Today, that beta is yours:


Lets start with the main display:

  • Log - The first panel is the webpack log panel where you can see build ouput.
  • Operations - The operations panel shows circular build progress, error counts, build status, total module size and total asset size.
  • Modules - The modules panel shows the modules used in the bundle and their sizes.
  • Assets - The assets panel shows the assets produced by the build, with the JavaScript bundles displaying minified and gzipped sizes, along with warnings for bundle size limits.
  • Problems - The problems panel shows you problems such as version skews or duplicates.

Next up, we have an eye icon in the top right. Clicking that brings you to the Visualization panel.

This allows you to take a graphical look at your bundle composition, and see where bloat may be coming from.

Check out the dashboard in action:


One obvious goal for the future is to get this thing out of beta. That said, the switch to web based technology opens the door to faster iteration and really impressive features. One goal is to provide a wider set of best practices and common errors to validate against.

In the next few versions leading up to 1.0, expect: better and more visualizations; Lodash specific warnings; warnings that go beyond size, version skews, and duplicates; and better support for different configurations.

Give it a try now at:


Big shouts out to Jon Cooper for the design and Tyler Thompson for the additional plugin logic.

Also, a wholehearted shout out to Ramin Djawadi, composer of the Westworld soundtrack, which has powered this release.

We Are Formidable

Formidable is a Seattle and London-based engineering consultancy and open source software organization, specializing in React.js, React Native, GraphQL, Node.js, and the extended JavaScript ecosystem.

Since 2013, our agile team has worked with companies ranging in size from startups, to Fortune 100s, to build quality software and level up engineering teams.

Launching a new JavaScript Product?
Need Help with an Existing Project?

Get in touch

June 14, 2017

Why React Native is the Best Choice for Making Native Apps

Read Next