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
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!
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