如何设置vue cli3项目中的image-webpack-loader？

本文共计468个文字，预计阅读时间需要2分钟。

目录：Vue CLI 3 配置 image-webpack-loader

内容：使用 image-webpack-loader 压缩 Vue CLI 3 项目中的图片

1. 安装 image-webpack-loaderbashnpm install image-webpack-loader --save-dev

2. 配置 image-webpack-loader在 Vue CLI 3 项目中，通常在 `vue.config.js` 文件中进行配置。以下是一个示例配置：

javascriptmodule.exports={ configureWebpack: { module: { rules: [ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: [ { loader: 'file-loader', options: { name: '[name].[hash:8].[ext]' } }, { loader: 'image-webpack-loader', options: { mozjpeg: { progressive: true, quality: 65 }, // Optimize PNG images optipng: { enabled: true, }, // Optimize GIF images gifsicle: { interlaced: false, }, // Optimize SVG files svgo: { enabled: true, }, } } ] } ] } }};

以上配置会对图片进行压缩，同时支持多种格式的图片压缩。

目录

• vue cli3配置image-webpack-loader
• 使用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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。