安装image-webpack-loader 后启动项目报错

熙翎

已于 2022-01-28 09:30:50 修改

阅读量6.7k

点赞数 4

分类专栏： bug vue 文章标签： vue.js webpack

于 2020-09-21 15:29:11 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42853570/article/details/108708238

版权

vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

bug

5 篇文章

订阅专栏

error in .c/assets/img/t2.png

Module build failed: Error: ‘D:\eclipse-workspace\NVSI.Client\WebRoot\WEB-INF\subsite\node_modules\pngquant-bin\vendor\pngquant.exe’ ڲ ⲿ Ҳ ǿ
еĳ
ļ
at notFoundError (D:\eclipse-workspace\NVSI.Client\WebRoot\WEB-INF\subsite\node_modules\imagemin-pngquant\node_modules\cross-spawn\lib\enoent.js:6:26)

安装插件 imagemin-pngquant
npm install imagemin-gifsicle
npm install imagemin-mozjpeg
npm install imagemin-optipng
npm install imagemin-pngquant
cnpm install pngquant-bin

安装image-webpack-loader 报错
命令：

//删除原来安装的image-webpack-loader
npm uninstall image-webpack-loader 
//从国内下载  --->缺点：每次删除插件时，都需要重新下载，最好是访问外网用yarn下载
cnpm install image-webpack-loader 
//用yarn下载 --
yarn install image-webpack-loader

webpack.base.conf.js相关配置：

{// 对图片资源文件使用url-loader  
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use:[
           {
            loader: 'url-loader',
            options: {
              limit: 10000,// 小于10K的图片转成base64编码的dataURL字符串写到代码中
              fallback: 'file-loader',
              name: utils.assetsPath('img/[name].[hash:7].[ext]')// 其他的图片转移到静态资源文件夹
            }
           },          
           {
            loader: 'image-webpack-loader',// 压缩图片
            options: {
              mozjpeg: {//jpeg压缩
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {//png压缩
                enabled: false,
              },
              pngquant: {//png压缩
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {//gif压缩
                interlaced: false,
              } 
              // the webp option will enable WEBP
              //webp: {
              // quality: 75
              //}
            } 
          }
        ]
      }

相关链接：
官方文档：https://www.npmjs.com/package/image-webpack-loader#libpng-issues
https://blog.youkuaiyun.com/stanxl/article/details/78639608?utm_source=blogxgwz16

最后说明：
建议使用外网（“G(和谐)F（和谐）W（和谐）”），采用yarn（优势：避免版本冲突问题）下载；
下载过程中，会出现raw.githubusercontent.com 连接超时，解决方案：
1、查询raw.githubusercontent.com的公网ip

2、选择访问不超时的ip
运行-cmd
输入 ping XX.XX.XXX.XXX

3、配置hosts
打开文件：C:\Windows\System32\drivers\etc\hosts
配置 ip空格，例如：185.199.110.133 raw.githubusercontent.com

4、重新安装image-webpack-loader即可