Use the Webpack Dashboard to Monitor Webpack Operations

Share this video with your friends

Send Tweet

Learn how to use the new <a href="https://github.com/FormidableLabs/webpack-dashboard">Webpack Dashboard</a> from <a href="https://formidable.com/blog/2016/08/15/introducing-webpack-dashboard/">Formidable Labs</a> to display a pretty, useful output for monitoring the status of your webpack builds. This command line tool replaces the frequently unhelpful large text dump that webpack generates with a pretty user interface that breaks out useful information and presents it in a way that's easy to understand at a glance.

Eric Fields
Eric Fields
~ 5 years ago

Seems like my logs runneth over: https://www.dropbox.com/s/q1gefiukct6sqvd/Screenshot%202016-08-17%2009.46.25.png?dl=0 … any idea what this could be?

mykola bilokonsky
mykola bilokonskyinstructor
~ 5 years ago

Hmm, unsure - is it possible that you're using too small a terminal window? Or, are you logging out anything custom as a part of your build? This is a new tool, as I understand it, so there may be some bugs to work out - I'd consider reporting an issue on their github, linked inside the index.html file in the lesson.

Alan Plum
Alan Plum
~ 5 years ago

The video is already outdated. Check the README of webpack-dashboard for the new version's API. Basically you no longer use webpack-dashboard in your app and instead run it directly and let it spawn your server. This ensures the logs are correctly intercepted and show up where they should.

Shekhar Kumar
Shekhar Kumar
~ 5 years ago

Overkill. We should be happy with what webpack displays on console normally. This tool has just added 4 green bordered containers, while the output is still the same.