webpack-dashboard

英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

为你的 webpack 开发服务器提供的 CLI 仪表板

这是关于什么的？

使用 webpack，特别是对于开发服务器时，你可能习惯看到类似这样的内容：

这很酷，但大多数时候只是噪音，需要滚动，并不是特别有用。这个插件改变了这一点。现在，当你运行你的开发服务器时，你基本上像在 NASA 一样工作：

安装

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

ℹ️ 注意：你也可以全局安装仪表板（例如 npm install -g webpack-dashboard），用于任何项目，一切应该都能正常工作。

使用

webpack-dashboard@^3.0.0 需要 Node 8 或更高版本。 以前的版本支持最低到 Node 6。

首先，导入插件并将其添加到你的 webpack 配置中：

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

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

然后，修改你之前的开发服务器启动脚本，看起来像这样：

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

你会将其更改为：

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

现在你可以像平常一样运行你的启动脚本，不过现在，你变得很棒。不是说你以前不棒。我只是说，更棒而已。

自定义

更多配置自定义示例可以在我们的入门指南中找到。

例如，如果你想使用一个自定义端口让 webpack-dashboard 在其插件和 CLI 工具之间通信，你首先需要在 webpack 配置中的选项对象里设置这个数字：

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

然后，你会将它传递给 CLI 进行匹配：

$ webpack-dashboard --port 3001 -- webpack

⚠️ 警告：选择自定义端口时，您需要找到一个未被使用的端口。您不应该选择 webpack-dev-server / devServer 或任何其他进程正在使用的端口。相反，请选择一个仅用于 webpack-dashboard 的端口，并在插件配置和 CLI 端口标志中进行配对。

运行它

最后，使用您设置的任意命令启动服务器。无论是 npm run dev 还是 npm start 指向 node devServer.js 或类似命令。

然后，坐下来假装自己是一名宇航员。

支持的操作系统和终端

macOS → Webpack Dashboard 可在 Terminal、iTerm 2 和 Hyper 中使用。对于像滚动这样的鼠标事件，在 Terminal 中需要确保启用 View → Enable Mouse Reporting。macOS El Capitan、Sierra 和 High Sierra 支持此功能。在 iTerm 2 中，要选择整行文本，请按住 ⌥ Opt 键。要选择一个文本块，请按住 ⌥ Opt + ⌘ Cmd 键组合。

Windows 10 → Webpack Dashboard 可在命令提示符、PowerShell 和 Windows 的 Linux 子系统中使用。鼠标事件当前不支持，如我们使用的底层终端库 Blessed 文档中进一步讨论。主日志可以通过 ↑、↓、Page Up 和 Page Down 键滚动。

Linux → Webpack Dashboard 已在基于 Debian 的 Linux 发行版（如 Ubuntu 或 Mint）内置终端应用中验证。鼠标事件和滚动自动支持。要突出显示或选择行，请按住 ⇧ Shift 键。

API

webpack-dashboard（命令行界面）

选项

• -c, --color [color] - 为仪表盘自定义 ANSI 颜色
• -m, --minimal - 以最小模式运行仪表盘
• -t, --title [title] - 设置终端窗口标题
• -p, --port [port] - 套接字通信服务器的自定义端口
• -a, --include-assets [string prefix] - 限制显示匹配字符串前缀的资源名称（此选项可以重复，并会连接到 new DashboardPlugin({ includeAssets }) 选项数组中）

参数

[command] - 您要运行的命令，例如 webpack-dashboard -- node index.js

Webpack 插件

选项

• host - 用于连接套接字客户端的自定义主机
• port - 用于连接套接字客户端的自定义端口
• includeAssets - 限制显示与字符串前缀或正则表达式匹配的资产名称 (Array<String | RegExp>)
• handler - 插件处理方法，例如 dashboard.setData

注意：你也可以直接传入一个函数作为参数，该函数将成为处理器，例如 new DashboardPlugin(dashboard.setData)

本地开发

我们已经对使用 yarn 的 webpack-dashboard 本地开发流程进行了标准化。我们建议使用 yarn 1.10.x+，因为这些版本包含 integrity 校验和。校验和有助于在执行安装包的代码之前验证其完整性。🚀

要在本地运行此仓库并使用我们提供的示例，请按照常规步骤操作。

yarn
yarn dev

我们重用了 inspectpack 的少量固定装置，这样你就可以在本地操作仪表盘，同时模拟在实际环境中可能遇到的常见 node_modules 依赖问题。这些示例位于 /examples。

要更改你正在使用的示例，只需在 package.json 的 dev 脚本中修改 EXAMPLE 环境变量，使其匹配你想在 /examples 中运行的场景。例如，如果你想运行 tree-shaking 示例，将 dev 脚本从如下内容更改：

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

到这个：

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

然后只需运行 yarn dev 就可以启动并运行。非常感谢 PRs！

贡献

请参阅我们的 贡献指南。

鸣谢

模块输出深受以下项目启发：https://github.com/robertknight/webpack-bundle-size-analyzer

错误输出深受以下项目启发：https://github.com/facebookincubator/create-react-app

维护状态

活跃: Formidable 正在积极维护此项目，并预计在可预见的未来继续工作。欢迎提交错误报告、功能请求和拉取请求。