vue cli3配置image-webpack-loader方式
更新时间:2022年07月29日 11:49:58 作者:萝卜砸大坑
这篇文章主要介绍了vue cli3配置image-webpack-loader方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vue cli3配置image-webpack-loader
vue cli3配置image-webpack-loader对图片进行压缩优化
安装
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’ �����ڲ����ⲿ���Ҳ���ǿ����еij���
解决方法:
卸载了再重新安装image-webpack-loader
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
关于Vue.js 2.0 的 Vuex 2.0你需要更新的知识库,感兴趣的小伙伴们可以参考一下2016-11-11
Vue CLI3中使用compass normalize的方法
这篇文章主要介绍了Vue CLI3中使用compass normalize的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-05-05


最新评论