explaingit

formidablelabs/webpack-dashboard

14,001JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

Webpack Dashboard replaces webpack's messy scrolling terminal output with a clean, organized display showing build status, errors, and asset sizes at a glance while you develop.

Mindmap

mindmap
  root((webpack-dashboard))
    What It Does
      Terminal dashboard
      Replaces webpack output
      Build status display
    Setup
      npm or yarn install
      Webpack plugin config
      Dev server command
    Options
      Custom port
      Color theme
      Minimal mode
    Platforms
      macOS Linux
      Windows 10
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Replace webpack's default terminal noise with a tidy dashboard during local development.

USE CASE 2

Quickly spot build errors and oversized assets without scrolling through walls of text.

USE CASE 3

Run the dashboard on a custom port when multiple projects share the same dev machine.

Tech stack

JavaScriptnpmwebpack

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Webpack Dashboard is a tool from Formidable Labs that improves the information you see in the terminal while using webpack. Webpack is a popular build tool that takes the many JavaScript and asset files in a web project and packages them together for the browser. While you develop, webpack normally prints a long stream of text that scrolls past quickly, and the README argues that most of it is noise and hard to read. This tool replaces that output with a tidy, organized dashboard inside the terminal window. You install it through the npm or yarn package managers, either inside a single project or globally so any project can use it. Setting it up takes two small steps. First you add the dashboard's plugin to your webpack configuration file. Then you change the command that starts your development server so that it runs through the webpack-dashboard command instead of directly. After that you start the server the same way you always did, and the dashboard appears. The README covers a few customization options. You can tell the plugin and the command line tool to talk to each other over a specific port number, with a warning to pick a port that nothing else is already using. The command line tool also accepts settings for a custom color, a minimal display mode, a window title, and a filter that limits the view to certain asset names. There is a section on which systems and terminals are supported, covering macOS, Windows 10, and Linux, with notes on how scrolling and text selection behave in each because mouse support varies. The remainder of the README is aimed at people who want to work on the tool itself, explaining how to run it locally against the bundled examples. The project lists its maintenance status as active, meaning the team is still fixing bugs and accepting contributions.

Copy-paste prompts

Prompt 1
Show me how to add webpack-dashboard to an existing webpack config and update my dev server start command to use it.
Prompt 2
How do I configure webpack-dashboard to run on port 3002 instead of the default, so it does not clash with another project?
Prompt 3
Walk me through setting up webpack-dashboard on Windows 10, are there any terminal compatibility issues I should know about?
Prompt 4
How do I use webpack-dashboard's minimal mode and filter options to show only the assets I care about?
Open on GitHub → Explain another repo

← formidablelabs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.