1,报错信息
Error: Cannot find module 'gifsicle'
2,报错原因
可能是使用了 npm 进行安装 image-webpack-loader
插件的的,导致有一些依赖没有下载下来,所以启动和打包双双出现报错;
3,解决方法
3.1、安装淘宝镜像如下(已经安装过的就不用再安装了):
npm install cnpm -g --registry=https://registry.npmmirror.com
3.2、先卸载目前项目中的image-webpack-loader
,使用cnpm国内淘宝镜像进行下载(亲测有效):
cnpm install --save-dev image-webpack-loader
4,开始使用image-webpack-loader
在vue.config.js里面的chainWebpack
配置模块添加以下代码:
module.exports = {
/* 对内部的 webpack 配置(比如修改、增加Loader选项)(链式操作) */
chainWebpack: (config) => {
// 压缩图片插件
config.module
.rule('images')
/* 注意会报这个错误 Cannot find module 'imagemin-gifsicle' 需要下载cnpm install --save-dev image-webpack-loader 才有效*/
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
mozjpeg: { progressive: true, quality: 65 },
optipng: { enabled: false },
pngquant: { quality: [0.8, 0.9], speed: 4 },
gifsicle: { interlaced: false },
webp: { quality: 75 },
});
},
}