本文详细介绍在Vue项目中配置image-webpack-loader进行图片压缩的方法。重点解析vue.config.js中chainWebpack的配置细节，指出file-loader与image-webpack-loader的使用顺序及WebP格式的兼容性风险。针对开发环境中常见的乱码及模块找不到报错，提供通过cnpm重新安装依赖的解决方案。
image-webpack-loader基础配置
第一步，启动编辑 webpack.base.config.js 文件。
注意：此处 url-loader 与 image-webpack-loader 不可共存，否则图片将无法显示。
随后定位到相关配置区域。
module: {
rules: [
{}...
]
}在此处添加配置，务必确保 'file-loader' 位于 'image-webpack-loader' 之前。
存在多种配置项，可据此调整压缩后图片的质量参数。
注意：启用 webp 格式可显著减小文件体积，但 iOS 系统不支持该格式，可能导致 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
// }
}
}
]
},
解决vue-cli3乱码与模块报错
补充说明：记录一次在 vue-cli3 中使用 image-webpack-loader 进行图片优化时遭遇乱码报错的经历。
通过命令行执行 npm install --save-dev image-webpack-loader 以在开发环境中下载优化包，随后在 vue.config.js（vue-cli3 配置文件）中按以下方式配置。
代码示例：在 chainWebpack 函数内部。
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()然而，在启动 dev 模式后。
出现大量乱码报错信息。
同事在使用该配置时，也遇到了诸如无法找到 image-webpack-loader 模块等报错。
经查阅百度及论坛，虽有他人遇到此问题，但未见有效解决方案。
经过排查，发现根源在于包的安装方式。
随后执行 npm uninstall image-webpack-loader 以移除该包。
接着使用 cnpm install --save-dev image-webpack-loader 通过镜像源下载并解决此问题。
这真是令人无奈的无技术含量的泪水。
上述关于在 vue 中使用 image-webpack-loader 的实例即为小编分享的全部内容，希望能为读者提供参考，也恳请多多支持本站。