使用优雅的webpack命令行工具:webpack-dashboard

最新推荐文章于 2024-08-21 09:39:32 发布

芥小沫

最新推荐文章于 2024-08-21 09:39:32 发布

阅读量1.2k

点赞数

分类专栏：良心文章

良心文章专栏收录该内容

5 篇文章 0 订阅

订阅专栏

原文：http://yaowenjie.github.io/front-end/using-webpack-dashboard
本文转自：http://www.tuicool.com/articles/6RzMbaJ

webpack-dashboard是用于改善开发人员使用webpack时控制台用户体验的一款工具。它摒弃了webpack（尤其是使用dev server时）在命令行内诸多杂乱的信息结构，为webpack在命令行上构建提供了一目了然的仪表盘(dashboard)，其中包括 构建过程 和状态、日志以及涉及的 模块列表 。使用它，你就可以更加优雅的使用webpack构建你的代码。

另外，它自开源以来短短半个月，就已经在github上收获了6000多枚star。

## 它是什么简单地说， webpack-dashboard 就是把原先你使用webpack时（特别是使用webpack dev server时）命令行控制台打印的日志：

转换成了这样：

看到这里，是不是觉得整个人生都变美好了呢。仔细看，这个dashboard里面按日志(Log)、状态(Status)、运行(Operation)、过程(Progess)、模块(Modules)、产出(Assets)这6个部分将信息区分开来。用官方的话，这将会给你一种在NASA工作的即使感，哈哈。

如何使用

其实安装和使用webpack-dashboard的过程非常简单，首先使用npm本地安装它，到你基于webpack的前端项目上：

npm install webpack-dashboard --save-dev

如果你利用webpack-dev-server启动了一个server，而不是express的话，可以直接在 webpack.config.js 里面初始化dashboard。

首先，导入dashboard和其对应的插件，并创建一个dashboard的实例：

var Dashboard = require('webpack-dashboard');
var DashboardPlugin = require('webpack-dashboard/plugin');
var dashboard = new Dashboard();

然后，在对应的 plugins 里面添加DashboardPlugin：

plugins: [
  new DashboardPlugin(dashboard.setData)
]

最后，你需要让dev server处于静默的状态启动（主要是为了去掉多余的日志），要实现这一点，你可以像官方那样，在WebpackDevServer的构造函数里添加 quiet: true 。

new WebpackDevServer(
  Webpack(settings),
  {
    publicPath: settings.output.publicPath,
    hot: true,
    quiet: true, // lets WebpackDashboard do its thing
    historyApiFallback: true,
  }
).listen(

当然，你也可以在npm的script里面启动dev server时添加 quiet 选项（我在尝试的时候选择这种简单的方式）。

"scripts": {
  "start": "webpack-dev-server --quiet"
},

这样，你就可以运行诸如 npm start 这样的命令启动你的server。然后，你就可以休息一下，泡杯咖啡，假装自己就是一位宇航员，静静地看着你的dashboard。

如下图所示，为笔者尝试时的截图：

最后

本文之介绍了基于webpack-dev-server的这一种使用情况，其他启动server的方式（比如express）或者其他情况可以参考 webpack-dashboard github官方仓库。

webpack-dashboard目前还处于初期阶段，所以必然还有一些值得注意或者值得改进的地方。如果你使用的是OS X自带的终端(Terminal)，需要确认”View → Allow Mouse Reporting”是使能(Enable)状态，如果你的终端没有这个功能的话，你或许可以尝试一下 iTerm2 。另外，如果你忘记使用quiet模式或者你的某些log/名字过长，可能会导致显示的字符串“越界”，跑到另一个区域，看起来没有那么直接美观了。

最后，如果你想简单的看一下webpack-dashboard启动起来的效果，你可以参考使用本文示例代码。