在vue中使用image-webpack-loader实例


Posted in Javascript onNovember 12, 2020

首先打开 webpack.base.confi.js

提示:在这里url-loader 和 image-webpack-loader 不能一起使用,否则会导致图片出不来

接着找到

module: {
  rules: [
   {}...
  ]
}

在这里写入,一定要先写 ‘file-loader' 才能使用 'image-webpack-loader'

有各种配置,可以调整你要压缩后图片的质量

提示:如果使用了 webp 会大大减少体积,但是ios并不支持这个格式,会导致在ios上看不见图片

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    use: [
     {
     loader: 'file-loader',
     options: {
       name: '[name].[hash:7].[ext]',
       outputPath: 'mobile/img'
      }
     },
     {
      loader: 'image-webpack-loader',
      options: {
       mozjpeg: {
        progressive: true,
        quality: 50
       },
       // optipng.enabled: false will disable optipng
       optipng: {
        enabled: false,
       },
       pngquant: {
        quality: [0.5, 0.65],
        speed: 4
       },
       gifsicle: {
        interlaced: false,
       },
       //ios不支持
       // webp: {
       //  quality: 100
       // }
      }
     }
    ]
   },

补充知识:记一次vue-cli3中 mage-webpack-loader 图片优化时,乱码报错的问题

命令行 npm install --save-dev image-webpack-loader在开发环境中下载下来优化包以后,在vue.config.js(vue-cli3配置文件)中使用如下

在vue中使用image-webpack-loader实例

代码: chainWebpack函数下

config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()

但是这样在dev 以后

在vue中使用image-webpack-loader实例

一堆乱码的报错

我同事在使用这个的时候,也出现了一系列无法找到 image-webpack-loader模块这类的报错

在查阅百度,论坛,有遇到这个问题的,但没人解决的

后面看了一下,找到是包安装的问题,npm下载下来的时候因为翻墙的问题,包下载的不完全

后面npm uninstall image-webpack-loader 删除了包

然后cnpm install --save-dev image-webpack-loader 镜像下载解决的

在vue中使用image-webpack-loader实例

流下了没有技术的泪水~

以上这篇在vue中使用image-webpack-loader实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 #Javascript
JavaScript ES 模块的使用
Nov 12 #Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 #Javascript
vue 解决provide和inject响应的问题
Nov 12 #Javascript
vue的$http的get请求要加上params操作
Nov 12 #Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 #Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 #Javascript
You might like
php语言流程控制中的主动与被动
2012/11/05 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
php中函数前加&符号的作用分解
2014/07/08 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
jQuery代码优化方法总结
2018/01/29 jQuery
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
python实现自动网页截图并裁剪图片
2018/07/30 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
小区门卫值班制度
2014/01/24 职场文书
合同协议书格式
2014/04/18 职场文书
护理专业求职信
2014/06/15 职场文书
司机岗位职责
2015/02/04 职场文书
商场收银员岗位职责
2015/04/07 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
单独二胎证明
2015/06/24 职场文书
python编写函数注意事项总结
2021/03/29 Python
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis