webpack-dashboard README

The project's README from github.com/FormidableLabs/webpack-dashboard. As one markdown file: README.md.

Webpack Dashboard — Formidable, We build the modern web

npm version Actions Status Coverage Status Maintenance Status

A CLI dashboard for your webpack dev server

What's this all about?

When using webpack, especially for a dev server, you are probably used to seeing something like this:

https://i.imgur.com/p1uAqkD.png

That's cool, but it's mostly noise and scrolly and not super helpful. This plugin changes that. Now when you run your dev server, you basically work at NASA:

https://i.imgur.com/qL6dXJd.png

Install

$ npm install --save-dev webpack-dashboard
# ... or ...
$ yarn add --dev webpack-dashboard

ℹ️ Note: You can alternatively globally install the dashboard (e.g. npm install -g webpack-dashboard) for use with any project and everything should work the same.

Use

webpack-dashboard@^3.0.0 requires Node 8 or above. Previous versions support down to Node 6.

First, import the plugin and add it to your webpack config:

// Import the plugin:
const DashboardPlugin = require("webpack-dashboard/plugin");

// Add it to your webpack configuration plugins.
module.exports = {
  // ...
  plugins: [new DashboardPlugin()];
  // ...
};

Then, modify your dev server start script previously looked like:

"scripts": {
    "dev": "node index.js", # OR
    "dev": "webpack-dev-server", # OR
    "dev": "webpack",
}

You would change that to:

"scripts": {
    "dev": "webpack-dashboard -- node index.js", # OR
    "dev": "webpack-dashboard -- webpack-dev-server", # OR
    "dev": "webpack-dashboard -- webpack",
}

Now you can just run your start script like normal, except now, you are awesome. Not that you weren't before. I'm just saying. More so.

Customizations

More configuration customization examples can be found in our getting started guide.

For example, if you want to use a custom port of webpack-dashboard to communicate between its plugin and CLI tool, you would first set the number in the options object in webpack configuration:

plugins: [new DashboardPlugin({ port: 3001 })];

Then, you would pass it along to the CLI to match:

$ webpack-dashboard --port 3001 -- webpack

⚠️ Warning: When choosing a custom port, you need to find one that is not already in use. You should not choose one that is being used by webpack-dev-server / devServer or any other process. Instead, pick one that is only for webpack-dashboard and pair that up in the plugin configuration and CLI port flag.

Run it

Finally, start your server using whatever command you have set up. Either you have npm run dev or npm start pointed at node devServer.js or something along those lines.

Then, sit back and pretend you're an astronaut.

Supported Operating Systems and Terminals

macOS → Webpack Dashboard works in Terminal, iTerm 2, and Hyper. For mouse events, like scrolling, in Terminal you will need to ensure View → Enable Mouse Reporting is enabled. This is supported in macOS El Capitan, Sierra, and High Sierra. In iTerm 2, to select full rows of text hold the ⌥ Opt key. To select a block of text hold the ⌥ Opt + ⌘ Cmd key combination.

Windows 10 → Webpack Dashboard works in Command Prompt, PowerShell, and Linux Subsystem for Windows. Mouse events are not supported at this time, as discussed further in the documentation of the underlying terminal library we use Blessed. The main log can be scrolled using the ↑, ↓, Page Up, and Page Down keys.

Linux → Webpack Dashboard has been verified in the built-in terminal app for Debian-based Linux distributions such as Ubuntu or Mint. Mouse events and scrolling are supported automatically. To highlight or select lines hold the ⇧ Shift key.

API

webpack-dashboard (CLI)

Options
Arguments

[command] - The command you want to run, i.e. webpack-dashboard -- node index.js

Webpack plugin

Options

Note: you can also just pass a function in as an argument, which then becomes the handler, i.e. new DashboardPlugin(dashboard.setData)

Local Development

We've standardized our local development process for webpack-dashboard on using yarn. We recommend using yarn 1.10.x+, as these versions include the integrity checksum. The checksum helps to verify the integrity of an installed package before its code is executed. 🚀

To run this repo locally against our provided examples, take the usual steps.

yarn
yarn dev

We re-use a small handful of the fixtures from inspectpack so that you can work locally on the dashboard while simulating common node_modules dependency issues you might face in the wild. These live in /examples.

To change the example you're working against, simply alter the EXAMPLE env variable in the dev script in package.json to match the scenario you want to run in /examples. For example, if you want to run the tree-shaking example, change the dev script from this:

$ cross-env EXAMPLE=duplicates-esm \
  node bin/webpack-dashboard.js -- \
  webpack-cli --config examples/config/webpack.config.js --watch

to this:

$ cross-env EXAMPLE=tree-shaking WEBPACK_MODE=production \
  node bin/webpack-dashboard.js -- \
  webpack-cli --config examples/config/webpack.config.js --watch

Then just run yarn dev to get up and running. PRs are very much appreciated!

Contributing

Please see our contributing guide.

Credits

Module output deeply inspired by: https://github.com/robertknight/webpack-bundle-size-analyzer

Error output deeply inspired by: https://github.com/facebookincubator/create-react-app

Maintenance Status

Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.

webpack-dashboard (FormidableLabs/webpack-dashboard)

Searching Database…

14K ·GitHub
Webpack-dashboard
Что это такое?CLI-панель для вашего webpack dev-сервера: вместо бесконечно бегущих логов сборки вы получаете аккуратную дашборд в терминале, где сразу видны статус сборки, ошибки и журнал.
Это плагин для webpack, утилита командной строки или и то и другое?И то и другое — это две части одного инструмента. Вы добавляете его DashboardPlugin в конфиг webpack, а сама панель — отдельная команда CLI, которая выводится прямо в терминале.
Как его запустить?Установите пакет (подойдёт и глобальная установка вида 'npm install -g webpack-dashboard' — тогда он работает в любом проекте), добавьте плагин в конфиг webpack и поменяйте start-скрипт так, чтобы он запускался через панель: 'webpack-dashboard -- node devServer.js'.
Мне нужна свежая версия Node?Да — webpack-dashboard@^3.0.0 требует Node 8 или выше; более ранние версии работали вплоть до Node 6.
Нужно ли что-то настраивать, чтобы плагин и CLI взаимодействовали?По умолчанию нет — они находят друг друга сами. При желании можно задать нестандартный порт в настройках плагина и передать его CLI через -p, но он должен быть свободен и не использоваться ничем другим, включая webpack-dev-server.
Он будет работать в моём терминале на любой ОС?Да: подтверждена работа на macOS (Terminal, iTerm 2, Hyper), Windows 10 (Command Prompt, PowerShell, Linux Subsystem for Windows) и Linux на базе Debian, например Ubuntu. События мыши не поддерживаются на Windows, а в macOS Terminal нужно включить Mouse Reporting; в Linux они работают автоматически.
Можно ли настроить внешний вид панели или отфильтровать, что она показывает?Да. Среди флагов CLI есть -c/--color для своего ANSI-цвета, -m/--minimal для минималистичного режима и -a/--include-assets, чтобы показывать только те ресурсы, чьи имена начинаются с заданной строки.
Проект ещё активно развивается?Да — статус проекта указан как Active: Formidable собирается поддерживать его и дальше, приветствуются сообщения об ошибках, пожелания новых возможностей и pull request'ы.
What are similar projects?volta, nodemon, edit, svgr, hotel, inspector, yoinks, vue-cli
Which topics is it in?socket-io, devtools, webpack, tui, dashboard, monitoring, utility, web-development, command-line-tool, free, npm, frontend
Creator
FormidableLabs
Size
2.1 MB
Stars
14K
Updated
CommitAug 12Releasev3.3.8May 18
Age
10y
Commits · 90 Days