vue - vue使用webpack图片压缩插件报 Cannot find module ‘gifsicle‘ 的问题解决
vue使用webpack图片压缩插件报 Cannot find module 'gifsicle' 的问题解决
·
1,报错信息
Error: Cannot find module 'gifsicle'
2,报错原因
可能是使用了 npm 进行安装 image-webpack-loader
插件的的,导致有一些依赖没有下载下来,所以启动和打包双双出现报错;
3,解决方法
先卸载目前项目中的image-webpack-loader
,使用cnpm国内淘宝镜像进行下载(亲测有效):
cnpm install --save-dev image-webpack-loader
安装淘宝镜像如下(已经安装过的就不用再安装了):
npm install cnpm -g --registry=https://registry.npm.taobao.org
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 },
});
},
}
5,vue.config.js 中 configureWebpack 与 chainWebpack 这两个配置项的区别
详细说明链接
:https://cli.vuejs.org/zh/config/#integrity
- configureWebpack 和 chainWebpack的作用相同,唯一的区别就是它们修改 webpack 配置的方式不同:
- configureWebpack 通过操作对象的形式,来修改默认的 webpack 配置,该对象将会被 webpack-merge 合并入最终的 webpack 配置。
- chainWebpack 通过链式编程的形式,来修改默认的 webpack 配置。
更多推荐
已为社区贡献9条内容
所有评论(0)