扫一扫分享
webpack-dashboard是用于改善开发人员使用webpack时控制台用户体验的一款工具。
它摒弃了webpack(尤其是使用dev server时)在命令行内诸多杂乱的信息结构,为webpack在命令行上构建了一个一目了然的仪表盘(dashboard),其中包括构建过程和状态、日志以及涉及的模块列表。
有了它,你就可以更加优雅的使用webpack来构建你的代码。
npm install webpack-dashboard --save-dev
首先,导入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。
手机预览