webpack-dashboard

webpack-dashboardは、webpack dev serverの出力をより読みやすく有用にするために設計されたwebpack用CLIダッシュボードプラグインです。煩雑なビルドログをスクロールする代わりに、ダッシュボードのようなターミナルUIでビルド情報を表示します。 インストール: npmまたはyarnを使用して、開発依存関係としてローカルにインストールできます： npm install --save-dev webpack-dashboard yarn add --dev webpack-dashboard また、任意のプロジェクトで使用するためにグローバルにインストールすることも可能です。 使用方法: まず、プラグインをインポートし、webpack設定に追加します： const DashboardPlugin = require("webpack-dashboard/plugin"); module.exports = { plugins: [new DashboardPlugin()] }; 次に、devサーバーの起動コマンドをCLIツールでラップします。例えば、以下のように変更します： "dev": "webpack-dev-server" を "dev": "webpack-dashboard -- webpack-dev-server" に変更します。同様のパターンは、nodeスクリプトやwebpack直接実行時にも適用可能です。 カスタマイズ: このプラグインは、プラグインとCLIツール間の通信に使用するカスタムポートなどのオプションを受け付けます。カスタムポートを使用する場合は、webpack設定で指定します： new DashboardPlugin({ port: 3001 }) その後、CLIに一致するポートを渡します： webpack-dashboard --port 3001 -- webpack その他のCLIオプションには、ANSIカラー用の--color、最小モードの--minimal、ターミナルウィンドウのタイトルを設定する--title、文字列プレフィックスで表示アセットを制限する--include-assetsなどがあります。また、プラグインはhost、port、includeAssets、handlerオプションをサポートしています。 サポートプラットフォーム: macOSはTerminal、iTerm 2、Hyperでサポートされており、ターミナルの設定に応じてマウスイベントが利用可能です。Windows 10はコマンドプロンプト、PowerShell、Linux用Windowsサブシステムで動作しますが、マウスイベントはサポートされておらず、スクロールには矢印キーとPageキーを使用します。Linuxは、UbuntuやMintなどのDebianベースのディストリビューションの組み込みターミナルで検証されており、マウスイベントとスクロールが自動的にサポートされています。 メンテナンス: このプロジェクトはFormidableによって積極的にメンテナンスされており、バグ報告、機能リクエスト、プルリクエストを歓迎しています。