webpack-dashboard
webpack-dashboard 介绍
webpack-dashboard是用于改善开发人员使用webpack时控制台用户体验的一款工具。
它摒弃了webpack（尤其是使用dev server时）在命令行内诸多杂乱的信息结构，为webpack在命令行上构建了一个一目了然的仪表盘(dashboard)，其中包括构建过程和状态、日志以及涉及的模块列表。
有了它，你就可以更加优雅的使用webpack来构建你的代码。
webpack-dashboard安装
npm install webpack-dashboard --save-devwebpack-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可视化打包插件