Use the Webpack Dashboard to Monitor Webpack Operations
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.
[00:01] Let's say that you're building a web application using Webpack to assemble all of your stuff, and you've got it set up so that when you run npm start Webpack runs, and then you see all of this stuff dumped out to the console. That's useful. You can crawl through it and I guess...I don't know. Have you ever looked at this? I've never looked at this.
[00:23] Wouldn't it be cool if there was something a little bit more useful and pretty that you could put on the screen when you're using Webpack? It turns out that there is. This team at Formidable Labs just released a really cool Webpack dashboard. Let's take a look at how to use that.
[00:38] First of all, let's take a look at our source code here. This is a very straightforward simple application. Here's our Webpack configuration. We're serving content out of our public folder for static content. We're compiling our JavaScript from index.js into bundle.js, and we're using the babel-loader.
[00:57] This is all pretty vanilla. These are the dependencies we've got installed. You see we've got the babel stuff. We've got React stuff, and we've got Webpack. We run it by running server.js, and that's just using the webpack-dev-server through a custom express application. That looks like this. There's various ways to do this. This is one of them.
[01:22] When we run this Webpack is, of course, going to look at index.js. It's going to import anything it needs to import including React and reactDOM. Then here we've got a very basic React web application which is just rendering some very simple content to the DOM.
[01:41] If we want to use this cool Webpack dashboard with this, there's a few steps we have to take. That looks like this. First we're going to say npm install --save-dev webpack-dashboard. Then we're going to go into our web server, the dev server that we've got set up here, and we're going to perform a couple of inputs.
[02:16] First we have to say var Dashboard = require("webpack-dashboard"), which we've just installed via npm. Then we have to say var DashboardPlugin = require("wepack-dashboard/plugin").
[02:38] Now we've imported the code. In order to use it, we've got our compiler here. If you've never seen this before using a dev server like this, this is just what it looks like when you run a custom webpack dev server. Nothing too intimidating. Just take a look at the source code. I'll make sure I link this project.
[02:59] We're going to say var dashboard = new Dashboard. Then we're going to say compiler.apply(new DashboardPlugin(dashboard.setdata)).
[03:17] Then we've got to do one more thing here. Over here where we tell our express application to use the webpack-dev-middleware we're able to pass it a bunch of options. We need to make sure that we tell it to use the quiet option. This is going to tell it to make sure that it doesn't log stuff out in the normal way. Then when we start it, it's just going to go on port 8080 on local host. I see I've got a typo here.
[03:47] Now when I run npm start, instead of just that big wall of text you can see that we've got this nice dashboard. It has a log here of any messages we need to see. It tells us the status. It tells us whether or not something's happening right now. Here's our final asset, and here are all the different parts of that asset so we can see what percentage of our total file size comes from what source.
[04:19] If we were to go into our code here and make a change...let's say we go into index.js and we make a typo. Instead of importing react from React we're going to import it from reacts. That's a problem.
[04:31] Here we can see that it's building, and then we see that it failed, failed to compile. Cannot resolve module reacts. You can actually scroll in this window. If you're running...I don't think this will work in a native Terminal, but if you're on a Mac you're probably running iTerm anyway and this will work. You can scroll through here and your errors show up here. Your status shows up here. If we go back and we fix this, save it, it recompiles and everything works great.