Next Level Webpack Dashboard by@wesharehoodies

Next Level Webpack Dashboard

Read on Terminal Reader
react to story with heart
react to story with light
react to story with boat
react to story with money
image
Indrek Lasn HackerNoon profile picture

Indrek Lasn

image

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

image

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!

image

image

Much better.

Isn’t this much more human-readable?

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

image

image

create-react-app

image

image

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

image

image

Left — React and Vue — Right

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

Create-react-app and vue-cli production output

image

image

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.

image

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.

image

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

image

NPM

image

Yarn

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

image

image

Finally, update package.json scripts to the following:

image

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

image

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.

image

👍

image

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

image

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.

image

image

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

image

image

Works.

image

Vue-cli with webpack-dashboard

image

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)

image

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

image

image

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

react to story with heart
react to story with light
react to story with boat
react to story with money
L O A D I N G
. . . comments & more!