首先打開 webpack.base.confi.js

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

接著找到

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)境中下載下來(lái)優(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)了一系列無(wú)法找到 image-webpack-loader模塊這類的報(bào)錯(cuò)

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

后面看了一下，找到是包安裝的問題，npm下載下來(lái)的時(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ǎng)。