在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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
vue cli 全面解析
Feb 28 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
vue router 动态路由清除方式
May 25 Vue.js
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中上传大体积文件时需要的设置
2006/10/09 PHP
php discuz 主题表和回帖表的设计
2009/03/13 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
python改变日志(logging)存放位置的示例
2014/03/27 Python
Python标准库之循环器(itertools)介绍
2014/11/25 Python
Python3生成手写体数字方法
2018/01/30 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
Python 实现数组相减示例
2019/12/27 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
Python xlwt模块使用代码实例
2020/06/10 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
战友聚会邀请函
2014/01/18 职场文书
《白鹅》教学反思
2014/04/13 职场文书
中国梦读书活动总结
2014/07/10 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
综治维稳工作汇报
2014/10/27 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电