Electron Desktop GUI for Webpack Dashboard
Clone or download
mattcubitt Merge pull request #57 from FormidableLabs/fix/problems-not-showing
correctly show problems by changing flex 0 to flex 1
Latest commit a83b1ee Feb 1, 2018
Permalink
Failed to load latest commit information.
.vscode initial Aug 16, 2017
app correctly show problems by changing flex 0 to flex 1 Feb 1, 2018
flow-typed initial Aug 16, 2017
flow initial Aug 16, 2017
internals Renamed some files to conform to eslint rule (#48) Oct 25, 2017
mocks Renamed some files to conform to eslint rule (#48) Oct 25, 2017
resources initial Aug 16, 2017
test Renamed some files to conform to eslint rule (#48) Oct 25, 2017
.babelrc initial Aug 16, 2017
.editorconfig initial Aug 16, 2017
.eslintignore Renamed some files to conform to eslint rule (#48) Oct 25, 2017
.eslintrc Renamed some files to conform to eslint rule (#48) Oct 25, 2017
.flowconfig initial Aug 16, 2017
.gitattributes Exclude react-icons from DLL (#35) Sep 27, 2017
.gitignore initial Aug 16, 2017
.nvmrc initial Aug 16, 2017
.stylelintrc initial Aug 16, 2017
.travis.yml initial Aug 16, 2017
CONTRIBUTING.md README Aug 16, 2017
LICENSE README Aug 16, 2017
README.md un beta-ing Oct 13, 2017
appveyor.yml initial Aug 16, 2017
package.json Renamed some files to conform to eslint rule (#48) Oct 25, 2017
webpack.config.base.js initial Aug 16, 2017
webpack.config.eslint.js initial Aug 16, 2017
webpack.config.main.prod.js Renamed some files to conform to eslint rule (#48) Oct 25, 2017
webpack.config.renderer.dev.dll.js Renamed some files to conform to eslint rule (#48) Oct 25, 2017
webpack.config.renderer.dev.js Renamed some files to conform to eslint rule (#48) Oct 25, 2017
webpack.config.renderer.prod.js Renamed some files to conform to eslint rule (#48) Oct 25, 2017
yarn.lock Renamed some files to conform to eslint rule (#48) Oct 25, 2017

README.md

electron-webpack-dashboard

Electron Desktop GUI for Webpack Dashboard


http://i.imgur.com/9TObNrN.png

Whats this all about?

The original webpack-dashboard, was fun and people seemed to like it. Unless they were on Windows, or used a weird terminal set up, or if they just wanted more.

Making things work across a variety of different terminal environments is pretty rough. Also, a web GUI provides some unique UI possibilities that weren't there with the term display.

So here we are.

The original dashboard felt like working at NASA. 50 years ago. I hope this dashboard feels like working at NASA today. Or at Westworld. Or like the beginning of Westworld at least.

Getting Started

Install

Download the version for your OS here:

https://github.com/FormidableLabs/electron-webpack-dashboard/releases/latest

If you are on macOS you can also install the app via Homebrew Cask:

$ brew update
$ brew cask install webpack-dashboard

Webpack 3 compatibility

To receive a complete analysis of your bundle, including modules, assets, and problems, you will need to make sure your project is using Webpack Dashboard Plugin 1.0 or higher.

Configuring Your Project

First, in your project, install the webpack-dashboard plugin:

npm install webpack-dashboard --save-dev

Next, in any Webpack config you want telemetry on, import the plugin:

const DashboardPlugin = require('webpack-dashboard/plugin');

Then add the plugin to your config's plugins array, like so:

plugins: [
  // ... your other plugins
    new DashboardPlugin()
  ],

Usage

Simply hit save on a project running webpack-dev-server, or run your build task that builds with webpack and providing you have configured your project as shown above, you should see the dashboard start to display data.

Credits

The visualizations view was essentially recreated using code from https://github.com/chrisbateman/webpack-visualizer, and I am forever grateful that I didn't have to figure this stuff out on my own.