webpack-dashboard

webpack-dashboard 是一个适用于 webpack 的 CLI 仪表盘插件，旨在使 webpack dev server 的输出更具可读性和实用性。它不再让用户滚动浏览嘈杂的构建日志，而是将构建信息以类似于仪表盘的终端 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()] }; 然后，使用 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 支持命令提示符 (Command Prompt)、PowerShell 和适用于 Windows 的 Linux 子系统 (WSL)，但不支持鼠标事件；滚动需使用方向键和 Page 键。Linux 已在基于 Debian 的发行版（如 Ubuntu 和 Mint）的内置终端中验证，自动支持鼠标事件和滚动。 维护： 该项目由 Formidable 积极维护，欢迎提交 Bug 报告、功能请求和 Pull Request。