webpack-dashboard

webpack-dashboard 介绍

webpack-dashboard是用于改善开发人员使用webpack时控制台用户体验的一款工具。

它摒弃了webpack（尤其是使用dev server时）在命令行内诸多杂乱的信息结构，为webpack在命令行上构建了一个一目了然的仪表盘(dashboard)，其中包括构建过程和状态、日志以及涉及的模块列表。

有了它，你就可以更加优雅的使用webpack来构建你的代码。  

webpack-dashboard安装

npm install webpack-dashboard --save-dev

webpack-dashboard使用

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

const Dashboard = require('webpack-dashboard');

const Dashboardplugin = require('webpack-dashboard/plugin');

const 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。

网站地址:https://github.com/FormidableLabs/webpack-dashboard

GitHub:https://github.com/FormidableLabs/webpack-dashboard

网站描述:一款webpack可视化打包插件

webpack-dashboard

官方网站：https://github.com/FormidableLabs/webpack-dashboard