GithubHelp home page GithubHelp logo

doc22940 / electron-webpack-dashboard Goto Github PK

View Code? Open in Web Editor NEW

This project forked from formidablelabs/electron-webpack-dashboard

1.0 1.0 0.0 2.43 MB

Electron Desktop GUI for Webpack Dashboard

Home Page: http://formidable.com/blog/2017/introducing-electron-webpack-dashboard/

License: MIT License

CSS 1.29% HTML 1.17% JavaScript 97.54%

electron-webpack-dashboard's Introduction

Maintenance Status

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.

Maintenance Status

Archived: This project is no longer maintained by Formidable. We are no longer responding to issues or pull requests unless they relate to security concerns. We encourage interested developers to fork this project and make it their own!

electron-webpack-dashboard's People

Contributors

boygirl avatar develar avatar dmmulroy avatar kenwheeler avatar mattcubitt avatar rawrmonstar avatar stevemao avatar vinnymac avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.