Webpack 插件: webpackbar progress-bar-webpack-plugin 进度条插件分享
Webpack 插件: webpackbar & progress-bar-webpack-plugin 进度条插件分享
文章目录
- Webpack 插件: webpackbar & progress-bar-webpack-plugin 进度条插件分享
- 系列文章
- 前言
- 正文
- 0. 为什么需要进度条?
- 1. 安装依赖
- 2. 使用示例
- 2.1 progress-bar-webpack-plugin 效果
- 2.2 webpackbar 效果
- 3. 踩坑笔记: 进度条跑位
- 结语
- 其他资源
- 参考连接
- 完整代码示例
系列文章
- Webpack:入門
- Webpack:clean-webpack-plugin 清理資源
前言
今天来跟大家分享两个使用 webpack 作为打包工具的时候使用的两种进度条插件。
正文
0. 为什么需要进度条?
为什么需要加进度条呢?我们先看看下图
普通基本款的 webpack 打包的时候大概就是长这样,如果项目很大很大,又没报错我都以为他卡住还是坏掉了,加个进度条看起来也比较舒服,等起来也比较有个底,总之提升一下开发幸福度!
1. 安装依赖
首先安装一下依赖,本篇要介绍的进度条插件有两种
- progress-bar-webpack-plugin
$ yarn add progress-bar-webpack-plugin -D
- webpackbar
$ yarn add webpackbar -D
2. 使用示例
使用上几乎差不多,就是在配置文件里面添加插件
webpack.config.js
const WebpackBar = require('webpackbar')
const ProgressBarWebpackPlugin = require('progress-bar-webpack-plugin')module.exports = {// ...plugins: [new WebpackBar(),new ProgressBarWebpackPlugin(),],// ...
下面直接看看效果
备注:由于基础项目体积太小看不到进度条出现,所以另外引入一个 lodash
库来增加打包体积,延长时间方便看出效果hh
2.1 progress-bar-webpack-plugin 效果
2.2 webpackbar 效果
个人认为 webpackbar 展现出来的效果还是比较好看的
3. 踩坑笔记: 进度条跑位
使用进度条的时候有一个重点,如果在打包的过程中输出了 webpack 以外的 额外警告信息,则会影响到进度条输出的效果(注意不是进度条插件本身的问题,de了很久的bug hh)
以下是我自己测试的时候遇到了的问题:babel 的设置为默认的 compact: "auto"
时,有可能会差生
[BABEL] Note: The code generator has deoptimised the styling of "unknown" as it exceeds the max of "500KB".
的提示信息,造成输出样式的跑位,如下图
这时候就需要在 babel 的配置项里面(本篇位于 babel.config.json
文件里面)手动将 compact 设置为固定值(true、false
都行,只要指定一个 babel 就不会警告),就可以避免警告
{"presets": ["@babel/preset-env"],"compact": true
}
最后放一下打包后的页面结果
完整项目示例可以参照文章末尾链接
结语
进度条插件简单来说就是让打包看起来没那么无聊,提升一下开发体验hh。同时如果输出跑位还可以顺便看看是报什么错或是警告,还可以顺便查一查学一学,了解一下平常没有注意到的打包运行细节
其他资源
参考连接
Title | Link |
---|---|
npm packages - webpackbar | https://www.npmjs.com/package/webpackbar |
npm packages - progress-bar-webpack-plugin | https://www.npmjs.com/package/progress-bar-webpack-plugin |
[BABEL] Note: The code generator has deoptimised the styling of “unknown” as it exceeds the max of " | https://blog.csdn.net/xss392795158/article/details/103718334/ |
webpack4 常用插件列表及使用说明 | https://segmentfault.com/a/1190000015355816 |
BABEL配置项中的COMPACT问题 | https://www.freesion.com/article/9598855218/ |
完整代码示例
https://github.com/superfreeeee/Blog-code/tree/main/front_end/webpack/webpack_bars
Webpack 插件: webpackbar progress-bar-webpack-plugin 进度条插件分享相关推荐
- Process插件:typecho加载页面进度条插件
介绍: typecho加载页面进度条插件 这是一款适用于typecho任何主题的加载页面进度条,可以让你的博客加载时显得更加顺滑而不会显得过于突兀,使用本插件可以很好得起到视觉缓冲的作用. 本插件有十 ...
- 8款效果精美的 jQuery 加载动画和进度条插件
加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还 ...
- php进度条插件,分享8款优秀的 jQuery 加载动画和进度条插件_jquery
加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还 ...
- idea忽略某些文件,idea配 jdk、maven,改背景颜色,切换账号,彩虹进度条插件
idea相关配置 1. 忽略某些文件 2.配置jdk 3.maven配置 4.修改idea主题颜色 4.1 更多修改主题的方法 4.2 更多绚丽的主题推荐 4.3 自认为好看的几个主题 1. past ...
- jq画布插件_超炫HTML 5开发的jQuery进度条插件
今天我们分享一个超酷的使用HTML5画布技术开发的进度条插件 - percentageloader.这个插件比普通的水平进度条使用更加炫酷的效果,图形效果类似以前我们介绍的jQuery knob插件 ...
- html 可调节进度条控件,jQuery简单实用的轻量级进度条插件
jQMeter是一款简单实用的轻量级进度条jQuery插件,它可以显示为水平或垂直进度条,进度条加载时带有动画特效,你只需要简单的传入一些参数到jQMeter对象的构造函数中就可以完成你想要的进度条效 ...
- Xamarin XAML语言教程使用Progress属性数据绑定设置进度条进度
Xamarin XAML语言教程使用Progress属性数据绑定设置进度条进度 开发者除了可以为ProgressBar定义的Progress属性直接赋双精度类型的值外,还可以通过数据绑定的方式为该属性 ...
- pace.js网页自动加载进度条插件-好东西
pace.js – 网页自动加载进度条插件 源码地址 https://github.com/HubSpot/pace 入Pace.js以及主题文件 Pace.js公开的API列表, Pace.star ...
- get几个小技能:轮播图插件、进度条插件、筛选过滤插件
最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏 用到了许多有趣的东西们今天分享一下. 轮播图插件 Swiper轮播图插件 Swiper 的结构和基础原理 Swiper 的每个展 ...
最新文章
- 全网最火爆的“人生重开模拟器”,快来!
- zTree菜单的排序
- 新闻添加html页面
- c mysql日期时间格式_mysql日期和时间类型
- PyTorch入门-自然语言分类任务
- 市场部和销售部的区别
- 是的,我们真的在遭遇有史以来最大的DDoS攻击,并且还在加剧
- Lambda拉姆达表达式使用学习
- TableView图片闪动的问题
- 传智播客风清扬视频-------线程简介2
- mac 技术篇-修改hosts文件,hosts文件位置
- 这才是索罗斯暴富的真实秘密
- 搭建一个vue小页面
- Oracle的 alter table table_name nologging; 的使用
- 英特尔再遭反垄断围剿 或面临38亿美元罚款
- OFD文件转PDF怎么转换?教你一键转换方法
- html5是什么意思,html5是什么意思?
- android网络传输数据加密,Android网络数据加密传输
- 企企通:数字化浪潮下,企业如何利用间接采购策略,实现降本增效?
- 对程序员而言,有什么终身受用的底层知识?
热门文章
- flask缓存caching
- 进程伪装实现将进程伪装成任意程序
- linux超级用户使用,linux窗口下如何使用超级用户?
- IDEA 光标变粗无法用换行、插入
- java多线程编程之线程池技术全面解读
- Oracle CEO埃里森
- 寄存器数据问题反馈集锦--W5200/W5300相关
- nextval mysql_mysql实现nextVal功能
- Can’t import the named export ‘bypassFilter’ from non EcmaScript module (only default export is avai
- Python学习日记(三十三) Mysql数据库篇 一