vue?cli3配置image-webpack-loader方式
vue cli3配置image-webpack-loader
vue cli3配置image-webpack-loader對圖片進行壓縮優(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 })
? }重啟項目打包 ok
使用image-webpack-loader壓縮圖片報錯
安裝:請一定使用淘寶鏡像cnpm安裝,否則安裝的包是不完整的
如果之前使用了npm安裝,請先卸載再重新安裝
$ 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()
},

報了莫名其妙的錯:
Error: ‘[項目目錄]\node_modules\pngquant-bin\vendor\pngquant.exe’ ????????????????????????е????
解決方法:
卸載了再重新安裝image-webpack-loader
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue實現(xiàn)動態(tài)添加或者刪除對象和對象數(shù)組的操作方法
這篇文章主要介紹了在Vue項目中實現(xiàn)動態(tài)添加或者刪除對象和對象數(shù)組的操作方法,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
Vue實現(xiàn)關聯(lián)頁面多級跳轉(頁面下鉆)功能的完整實例
這篇文章主要給大家介紹了關于Vue實現(xiàn)關聯(lián)頁面多級跳轉(頁面下鉆)功能的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-03-03

