image-webpack-loader如何在vue項目中使用

發(fā)布時間：2020-11-16 15:29:28 來源：億速云閱讀：643 作者：Leah 欄目：開發(fā)技術(shù)

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)image-webpack-loader如何在vue項目中使用，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

首先打開 webpack.base.confi.js

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

接著找到

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

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

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

提示：如果使用了 webp 會大大減少體積，但是ios并不支持這個格式，會導(dǎo)致在ios上看不見圖片

 {
    test: /\.(png|jpe&#63;g|gif|svg)(\&#63;.*)&#63;$/,
    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ǔ)充知識：記一次vue-cli3中 mage-webpack-loader 圖片優(yōu)化時，亂碼報錯的問題

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

image-webpack-loader如何在vue項目中使用

代碼: chainWebpack函數(shù)下

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

但是這樣在dev 以后

image-webpack-loader如何在vue項目中使用

一堆亂碼的報錯

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

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

后面看了一下，找到是包安裝的問題，npm下載下來的時候因為翻墻的問題，包下載的不完全

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

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

image-webpack-loader如何在vue項目中使用

上述就是小編為大家分享的image-webpack-loader如何在vue項目中使用了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

image-webpack-loader如何在vue項目中使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽