Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 广告合作
  • 赞助一下
  • 关于我们
资源推荐
奇绘馆AI视频
新一代AI视频创作平台
Seedance 2.0
字节跳动新一代AI视频生成模型全面解析
fly63工具箱
简单、易用、便捷的在线工具
简约导航
一款清新简洁,免费无广告的导航网站
周易国学网
基于周易、八字、紫微斗数等传统国学文化
美图设计室
AI智能一键生成海报,免费平面设计
方舟(Coding Plan)
火山引擎推出的大模型API聚合订阅服务
阿里云优惠券
卓越的云计算技术和服务提供商
Trae
字节跳动推出的 AI原生编程工具
AI应用助手
一站式AI工具平台,为工作和学习提供智能解决方案

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
网站收录 / 问题反馈

webpack-dashboard

分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://github.com/FormidableLabs/webpack-dashboard
GitHub:https://github.com/FormidableLabs/webpack-dashboard
描述信息:一款webpack可视化打包插件
访问官网
GitHub

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://fly63.com/nav/921

更多»
热门资源
TypeScript
一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集
官网
GitHub
Vite
下一代前端开发与构建工具
官网
GitHub
webpack
webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起
官网
GitHub
npm
javascript 最流行的包管理器
官网
GitHub
yarn
可替代NPM的快速、可靠、安全的可信赖包管理工具Yarn
官网
GitHub
bower
解决js的依赖管理
官网
GitHub
grunt
基于Node.js的项目构建工具。它可以自动运行你所设定的任务
官网
GitHub
Parcel
快速,零配置的 Web 应用程序打包器
官网
GitHub
babel
Babel 是一个 JavaScript 编译器,可用下一代JavaScript 语法写代码
官网
GitHub
browserify
一个浏览器端代码模块化工具,require和module.exports来导入和导出.Browserify的原理:部署时处理代码依赖,将模块打包为一个文件。
官网
GitHub
Rolldown
Rust 驱动的高性能打包器
官网
GitHub
HEAD
一份你可以在 <head> 里设置的列表
官网
GitHub
类似于webpack-dashboard的资源
esprima
高性能,符合标准的ECMAScript 解析器
官网
GitHub
ESL
浏览器端的模块加载器,支持延迟定义和 AMD
点击进入
GitHub
lit-html
js中写 HTML 的模板引擎
官网
GitHub
shipit
用JavaScript编写的通用自动化和部署工具
官网
GitHub
microbundle
由 Rollup 提供支持的小型模块的零配置打包程序
官网
GitHub
Bun
现代的 JavaScript 运行时,与 Node 和 Deno 类似
官网
GitHub
Jiko
现代化的,易于使用的面向Javascript的模板引擎
官网
GitHub
duo.js
前端的下一代包管理器。
官网
GitHub
目录

手机扫一扫预览

》
分享组件加载中...
首页 技术导航 在线工具 技术文章 教程资源 前端标签 AI工具集 前端库/框架 实用工具箱 广告合作 关于我们

Copyright © 2018 Web前端开发网 All Rights Reserved. 提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主,助您解决各类实际问题,快速提升专业能力。