nuxt2项目中使用image-webpack-loader踩坑记录通过file-loader、url-loader、i

最近看@水冗水孚大佬的开源后台项目中通过file-loader、url-loader、image-webpack-loader三者搭配实现对项目中的图片压缩，想起我负责的官网项目中存放挺多图片资源的，一时手痒决定也尝试下。没想到一弄就是一下午，因为公司项目是nuxt2，疯狂踩坑。

首先给出项目的nuxt版本，"nuxt": "^2.15.8"，然后我们就开整吧！

由于nuxt集成了很多loader，比如需要用到的url-loader和file-loader,我们先看看文档怎么去配置的吧

没错file就是file-loader;imgUrl就是url-loader,（小声逼逼我参数配置下不就完事了吗）但是坑他就来了！！！

我们先按照官网的来配置，build一下

简单做个拓展，具体参数去npm上自己查一下（懒.jpg）

file-loader 是基础，用于输出文件。
url-loader 在 file-loader 的基础上新增小文件内联的功能，提升小资源的加载性能。
image-webpack-loader 是图片优化工具，配合上述两者压缩文件体积

看结果

这是初始资源文件结构

videos文件夹怎么打包到images？？？

img文件夹又是什么鬼我不是指定输出目录是images吗？？？

好在天无绝人之路，官方还提供在extend里面修改loader

难怪把videos文件夹打包到images里面了 （注意下图中的红色箭头） 但是我啥也没做呀，难搞

那我修改下name吧

发现无用（这边可能是我技术有限，我认为是nuxt的配置把我的覆盖了，希望大佬指点）

这可咋办呀！！！！

不怕

我们还有extend的写法

万事不决==>console.log(),好家伙合着处理图片的你就是url-loader,说好的file-loader呢

其实到这边基本就解决了，后续思路就是将file-loader、url-loader、image-webpack-loader一起push到rules注意顺序问题（右到左，下到上）

最后贴上代码

if (isClient && !isDev) {
    // 找到处理图片的容器
    const fileLoader = config.module.rules.filter((rule) =>
        rule.test.toString().includes('png')
    );
    // 重写 去掉一开始的
    fileLoader[0].use.pop();
    // 加上我想要的
    fileLoader[0].use.push({
        loader: 'url-loader',
        options: {
            limit: 0,
            name: '[name].[hash].[ext]'
        }
    });
    fileLoader[0].use.push({
        loader: 'file-loader',
        options: {
            name: '[name].[hash].[ext]',
            outputPath: 'images/'
        }
    });
    fileLoader[0].use.push({
        loader: 'image-webpack-loader',
        options: {
            disable: process.env.NUXT_ENV_MODE !== 'prod', // 开发环境禁用压缩，生产环境才做压缩，提升开发调试速度
            bypassOnDebug: true, // webpack@1.x
            mozjpeg: { quality: 60 }, // 压缩JPEG图像，压缩质量quality为60，范围0到100
            optipng: { enabled: true }, // 压缩PNG图像，enabled为true开启压缩
            pngquant: { quality: [0.65, 0.9], speed: 4 }, // 质量区间和速度就使用默认值吧
            gifsicle: { interlaced: false }, // Interlace gif for progressive rendering 默认false
            webp: { quality: 60 } // 压缩webp图片，压缩质量quality为60，范围0到100
        }
    });

附带一下vue.config.js里的写法

config.module.rule("images").test(/\.(jpg|jpe?g|png|PNG|gif|ico)$/) // 给这些图片类型做压缩
  .use("url-loader") // url-loader要搭配file-loader做图片压缩
  .loader("url-loader")
  .options({
    limit: 1024 * 12,// 小于12kb的图片压缩成base64，图片太大转成base64反而不太合适
    name: '[name].[hash].[ext]',
    outputPath: 'images/',//指定打包后的图片存放的位置，一般放在static下img文件夹里 name.ext分别为：文件名.文件后缀（按照原图片名）
  })
  .end() // 返回上一级 以便于继续添加loader
    .use("file-loader")
    .loader("file-loader")
    .options({
      name: '[name].[hash].[ext]',
      outputPath: 'images/',
    })
    .end()
// https://www.npmjs.com/package/image-webpack-loader
  .use('image-webpack-loader')
  .loader("image-webpack-loader")
  .options({
    disable: process.env.NODE_ENV == 'development' ? true : false, // 开发环境禁用压缩，生产环境才做压缩，提升开发调试速度
    bypassOnDebug: true, // webpack@1.x
    mozjpeg: { quality: 60 }, // 压缩JPEG图像，压缩质量quality为60，范围0到100
    optipng: { enabled: true }, // 压缩PNG图像，enabled为true开启压缩
    pngquant: { quality: [0.65, 0.90], speed: 4 }, // 质量区间和速度就使用默认值吧
    gifsicle: { interlaced: false }, // Interlace gif for progressive rendering 默认false
    webp: { quality: 60 } // 压缩webp图片，压缩质量quality为60，范围0到100
  })
  .end() // 返回上一级 继续添加loader
  .enforce('post') // 表示先执行配置在下面那个loader，即image-webpack-loader
  },

最后的效果，还是满意的

此次记录自己开发中的问题，有些地方可能不太了解，希望大佬们能多多指点。