vue?cli3配置image-webpack-loader方式

更新時(shí)間：2022年07月29日 11:49:58 作者：蘿卜砸大坑

這篇文章主要介紹了vue?cli3配置image-webpack-loader方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue cli3配置image-webpack-loader

vue cli3配置image-webpack-loader對(duì)圖片進(jìn)行壓縮優(yōu)化

安裝

npm install image-webpack-loader --save-dev

配置vue.config.js

chainWebpack: config => {
? ? config.plugins.delete('prefetch')
? ? config.plugin('provide').use(webpack.ProvidePlugin, [{
? ? ? $: 'jquery',
? ? ? jquery: 'jquery',
? ? ? jQuery: 'jquery',
? ? ? 'window.jQuery': 'jquery'
? ? }])
? ? config.module.rule('images')
? ? ? .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
? ? ? .use('image-webpack-loader')
? ? ? .loader('image-webpack-loader')
? ? ? .options({ bypassOnDebug: true })
? }

重啟項(xiàng)目打包 ok

使用image-webpack-loader壓縮圖片報(bào)錯(cuò)

安裝：請(qǐng)一定使用淘寶鏡像cnpm安裝，否則安裝的包是不完整的

如果之前使用了npm安裝，請(qǐng)先卸載再重新安裝

$ cnpm install image-webpack-loader --save-dev

配置：vue.config.js

chainWebpack: config => {
        const imagesRule = config.module.rule('images')
        imagesRule
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                bypassOnDebug: true
            })
            .end()
    },

報(bào)了莫名其妙的錯(cuò)：

Error: ‘[項(xiàng)目目錄](méi)\node_modules\pngquant-bin\vendor\pngquant.exe’ ????????????????????????е????

解決方法：

卸載了再重新安裝image-webpack-loader

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue使用watch監(jiān)聽(tīng)一個(gè)對(duì)象中的屬性的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue使用watch監(jiān)聽(tīng)一個(gè)對(duì)象中的屬性的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
vue父子組件傳值不能實(shí)時(shí)更新的解決方法
Vue是一個(gè)以數(shù)據(jù)驅(qū)動(dòng)、組件化的前端框架,其中組件化是Vue中較為重要的概念之一,組件之間的通信則成為Vue中較為普遍的需求,下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值不能實(shí)時(shí)更新的解決方法,需要的朋友可以參考下
2023-05-05
關(guān)于Vue.js 2.0的Vuex 2.0 你需要更新的知識(shí)庫(kù)
關(guān)于Vue.js 2.0 的 Vuex 2.0你需要更新的知識(shí)庫(kù)，感興趣的小伙伴們可以參考一下
2016-11-11
vue3+ts項(xiàng)目搭建的實(shí)現(xiàn)示例
這篇文章主要介紹了vue3+ts項(xiàng)目搭建的實(shí)現(xiàn)示例,本文目的在于記錄自己項(xiàng)目框架搭建的過(guò)程,通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-03-03
Vue CLI3中使用compass normalize的方法
這篇文章主要介紹了Vue CLI3中使用compass normalize的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
vue 公共列表選擇組件,引用Vant-UI的樣式方式
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表（1）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-06-06
vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue的插槽原來(lái)該這樣理解
這篇文章主要為大家詳細(xì)介紹了vue的插槽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02