Next Level Webpack Dashboard

Beautiful webpack dashboard inside the terminal

Webpack-dashboard has over 10 thousand stars on Github but yet I almost never encounter it. Why are we not taking advantage of this great plugin — I’m looking at you create-react-app and vue-cli 😊

Don’t forget you can pretend you work for NASA if someone shoulder peeks!!

When using webpack, especially for a dev server, you are probably used to seeing something like this

We all know this great webpack log. But I do wonder — who exactly is this screen for? Vastly superior alien race?

The webpack log desperately needs a new friendly UI.

Webpack-dashboard to the rescue!

Much better.

Isn’t this much more human-readable?

Let’s take look how two of the most popular scaffolding tools use webpack logging.

create-react-app

vue-cli

Not bad. Webpack is telling us if it compiled and which port is the webpack server listening. But we can definitely improve this just by a inch.

Error handling with create-react-app and vue-cli

Left — React and Vue — Right

Excellent! immediately after making a syntax error — we get notified!

Create-react-app and vue-cli production output

Also excellent, no complaints! Let’s give the webpack dashboard a go.

Using webpack-dashboard with custom config

Clone the custom webpack config from this repository. Navigate on chapter-5 and install the npm dependencies.

Paste this command in the terminal

Here’s a step by step, five chapter guide how this webpack config was set up — strongly recommend reading it through!

After pasting in the command and some patience — you should see the following screen.

Great! Working as intended. Let’s apply our changes!

NPM

Yarn

Require the webpack-dashboard plugin in webpack.config.js and call the plugin with the new keyword, like so:

Finally, update package.json scripts to the following:

Fire up our webpack with npm run start and we get the following

Booyah! Awesome! Source code incase you got lost. ❤

By the way — we don’t have to have this giant dashboard. Here’s a practical example with resizing the windows. Thanks iTerm.

👍

Create-react-app with webpack-dashboard

Unfortunately — we have to eject.

npm i -g create-react-app && create-react-app react-webpack-dashboard && cd react-webpack-dashboard && npm i webpack-dashboard --save-dev && npm run eject

Now I’m not a big fan of ejecting but if you find a work-around, please let me know!

We set it up the same way as with the custom config.

Open config/webpack.config.dev.js and require the dashboard plugin. Also don’t forget the include the plugin in the plugins: [] section. You can search for the plugin section with CTRL + F. Should be at line ~ 214.

Open package.json and update the start script to the following:

"start": "webpack-dashboard -- node scripts/start.js",

Testing time! Run the following commandnpm run start

Works.

Vue-cli with webpack-dashboard

Vue doesn’t have the eject concept. This is a no brainer since we don’t have to make sacrifices.

Open build/webpack.dev.conf.js — require the plugin (line 9) and insert the plugin (line 23)

Finally, go to package.json and change the dev script to the following

“dev”: “webpack-dashboard — node build/dev-server.js”,

Test it:

npm run start

Works

Thanks for your attention, dear reader!

Special thanks to the creators of webpack-dashboard, please show appreciation for the hard work — go and star the repository on github!

Feel free follow me for more — have a great day 👍

How to setup Webpack from scratch

Best courses to learn Javascript in 2017

Learn how to: Build A Cryptocurrency Native Mobile App With RN + Redux