Beautiful webpack dashboard inside the terminal 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 and 😊 Webpack-dashboard create-react-app 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. to the rescue! Webpack-dashboard 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 — and — Right React Vue 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 Navigate on chapter-5 and install the npm dependencies. Clone the custom webpack config from this repository. 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 and call the plugin with the keyword, like so: webpack.config.js new Finally, update scripts to the following: package.json Fire up our webpack with and we get the following npm run start 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 and require the dashboard plugin. Also don’t forget the include the plugin in the section. You can search for the plugin section with CTRL + F. Should be at line ~ 214. config/webpack.config.dev.js plugins: [] Open and update the start script to the following: package.json "start": "webpack-dashboard -- node scripts/start.js", Testing time! Run the following command npm 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 — require the plugin ( ) and insert the plugin ( ) build/webpack.dev.conf.js line 9 line 23 Finally, go to and change the dev script to the following package.json “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
