首先打開 webpack.base.confi.js

提示：在這里url-loader 和 image-webpack-loader 不能一起使用，否則會(huì)導(dǎo)致圖片出不來

接著找到

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

在這里寫入，一定要先寫 ‘file-loader' 才能使用 'image-webpack-loader'

有各種配置，可以調(diào)整你要壓縮后圖片的質(zhì)量

提示：如果使用了 webp 會(huì)大大減少體積，但是ios并不支持這個(gè)格式，會(huì)導(dǎo)致在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
       // }
      }
     }
    ]
   },

補(bǔ)充知識(shí)：記一次vue-cli3中 mage-webpack-loader 圖片優(yōu)化時(shí)，亂碼報(bào)錯(cuò)的問題

命令行 npm install --save-dev image-webpack-loader在開發(fā)環(huán)境中下載下來優(yōu)化包以后，在vue.config.js(vue-cli3配置文件)中使用如下

代碼: chainWebpack函數(shù)下

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

但是這樣在dev 以后

一堆亂碼的報(bào)錯(cuò)

我同事在使用這個(gè)的時(shí)候，也出現(xiàn)了一系列無法找到 image-webpack-loader模塊這類的報(bào)錯(cuò)

在查閱百度，論壇，有遇到這個(gè)問題的，但沒人解決的

后面看了一下，找到是包安裝的問題，npm下載下來的時(shí)候因?yàn)榈膯栴}，包下載的不完全

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

然后cnpm install --save-dev image-webpack-loader 鏡像下載解決的

流下了沒有技術(shù)的淚水~

以上這篇在vue中使用image-webpack-loader實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持服務(wù)器之家。

原文鏈接：https://blog.csdn.net/weixin_41143662/article/details/102720088