image-webpack-loader如何在vue项目中使用 - 行业资讯 - 肥雀云

　　介绍

这期内容当中小编将会给大家带来有关image-webpack-loader如何在vue项目中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

首先打开webpack.base.confi。js

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

接着找到

模块:{
　　规则:[
　　{}…
　　]
　　}

在这里写入,一定要先写“file-loader& # 39;才能使用& # 39;image-webpack-loader& # 39;

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

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

 {
　　测试:/\。(png | jpe& # 63; g | gif | svg)(\, # 63;。*), # 63;美元/,
　　用途:[
　　{
　　装载机:& # 39;file-loader& # 39;
　　选择:{
　　名称:& # 39;[名字]。[散列:7]。[ext] & # 39;,
　　outputPath: & # 39;移动/img # 39;
　　}
　　},
　　{
　　装载机:& # 39;image-webpack-loader& # 39;
　　选择:{
　　mozjpeg: {
　　进步:没错,
　　质量:50
　　},//optipng。启用:假将禁用optipng
　　optipng: {
　　启用:假的,
　　},
　　pngquant: {
　　质量:[0.5,0.65],
　　速度:4
　　},
　　gifsicle: {
　　交错:假的,
　　},//ios不支持//webp: {//质量:100//}
　　}
　　}
　　]
　　},

<强>记一次vue-cli3中mage-webpack-loader图片优化时,乱码报错的问题

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

config.module 　　.rule(& # 39;图像# 39;) 　　.use (& # 39; image-webpack-loader& # 39;) 　　.loader (& # 39; image-webpack-loader& # 39;) 　　.options ({ 　　bypassOnDebug:真　　}) 　　指标(最终)

但是这样在dev以后

上述就是小编为大家分享的image-webpack-loader如何在vue项目中使用了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。