image-webpack-loader 安装失败,webpack vue-loader

　　本文主要介绍了在vue中使用image-webpack-loader的例子，具有很好的参考价值。希望对大家有帮助。来和边肖一起看看吧。

　　先打开webpack.base.confi.js。

　　提示：url-loader和image-webpack-loader在这里不能一起使用，否则图片不会出来。

　　然后找到

　　模块：{

　　规则：[

　　{} .

　　]

　　}

　　若要在此处写入，您必须在使用“image-webpack-loader”之前先写入“file-loader”

　　有各种配置可以调整您想要压缩的图片的质量。

　　提示：如果使用webp，体积会大大减小，但ios不支持这种格式，会导致图片在ios上看不到。

　　{

　　测试：/\。(pngjpe？ggifsvg)(\？*)?$/,

　　使用：[

　　{

　　加载器：“文件加载器”，

　　选项：{

　　姓名：[姓名]。【哈希：7】。[ext]，

　　输出路径：“移动/img”

　　}

　　},

　　{

　　加载程序： image-webpack-loader ，

　　选项：{

　　mozjpeg: {

　　进步：真的，

　　质量：50

　　},

　　//optipng.enabled: false将禁用optipng

　　选项：{

　　启用：假，

　　},

　　pngquant: {

　　质量：[0.5，0.65]，

　　速度：4

　　},

　　礼物：{

　　交错：假，

　　},

　　//ios不支持

　　//webp: {

　　//质量：100

　　//}

　　}

　　}

　　]

　　},

　　补充知识：记一次vue-cli3中 mage-webpack-loader 图片优化时，乱码报错的问题

　　在开发环境中下载优化包后，在vue.config.js(vue-cli3配置文件)中使用命令行NPM安装-保存-开发映像-web pack-loader，如下所示

　　代码：在chainWebpack函数下

　　配置模块。规则(“图像”)。使用( image-webpack-loader )。加载器(“image-webpack-loader”)。选项({

　　bypassOnDebug: true

　　})。结束()

　　但是在dev之后，

　　一堆乱码的报错

　　当我的同事使用它时，出现了一系列错误，比如无法找到image-webpack-loader模块。

　　查一下百度和论坛，都有人遇到过这个问题，但是没有人解决。

　　看了一下，发现是包安装的问题。npm下载的时候，因为翻墙的问题，包没有下载完全。

　　然后NPM卸载映像包加载程序删除该包。

　　然后cnpm安装-保存-dev镜像-web pack-loader镜像下载解决方案。

　　流下没有技术的眼泪~

　　上面这个在vue中使用image-webpack-loader的例子就是边肖分享的所有内容。希望给大家一个参考，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。