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 Dashboar dpl ugin = require('webpack-dashboard/plugin');

const dashboard = new Dashboard();

然后，在对应的plugins里面 添加 Dashboar dpl ugin：

plugins: [

new Dashboar dpl ugin(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

如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。

查看更多关于webpack-dashboard的详细内容...