vue-cli4 配置 webpack 之用 image-webpack-loader图片压缩处理/优化

vue-cli4已经默认帮我们做了很多优化处理，包括静态资源输出、样式处理、代码分割等等。我们需要自己手动配置的事情更少了，而图片压缩处理就是其中的一件。

很多人直接这样在vue.config.js里面加 image-webpack-loader 配置：

chainWebpack: config => {
  config.module
    .rule("images")
      .use("image-webpack-loader")
        .loader("image-webpack-loader")
        .options({
          mozjpeg: { progressive: true, quality: 65 },
          optipng: { enabled: true },
          pngquant: { quality: [0.65, 0.9], speed: 4 },
          gifsicle: { interlaced: false }
          // webp: { quality: 75 }
        })
}

但image-webpack-loader的GitHub文档已经明确告诉我们：
In your webpack.config.js, add the image-loader, chained after the file-loader.
即：添加 image-loader 的时候，必须要链式地跟在 file-loader 后面。其实是先执行image-webpack-loader，然后再交由file-loader去处理。这很好理解，当然是先压缩后再复制输出到打包的静态资源目录去啦。

vue-cli4中 file-loader以及url-loader 的部分已经帮我们像这样配置过了：

webpackConfig => {
  webpackConfig.module
    .rule('images')
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use('url-loader')
        .loader(require.resolve('url-loader'))
        .options({
          limit: 4096,
          fallback: {
            loader: require.resolve('file-loader'),
            options: {
              name: `static/img[name].[hash:8].[ext]`
            }
          }
      })

接下来配置image-webpack-loader ，配置完成之后就可以正常压缩图片啦

    chainWebpack: config => {
        config.module
            .rule('images')
            .exclude.add(resolve('src/assets/icons')) // 排除icons目录，这些图标已用 svg-sprite-loader 处理，打包成 svg-sprite 了
            .end()
            .use('url-loader')
            .tap(options => ({
                limit: 10240, // 稍微改大了点
                fallback: {
                    loader: require.resolve('file-loader'),
                    options: {
                        // 在这里修改file-loader的配置
                        // 直接把outputPath的目录加上，虽然语义没分开清晰但比较简洁
                        name: 'static/img/[name].[hash:8].[ext]',
                        esModule: false, //低版本默认为false，高版本默认为true 这里为6.2.0为高本版本所以要手动设置为false 
                    }
                }
            }))
            .end()
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                mozjpeg: { progressive: true, quality: 50 }, // 压缩JPEG图像
                optipng: { enabled: true }, // 压缩PNG图像
                pngquant: { quality: [0.5, 0.65], speed: 4 }, // 压缩PNG图像
                gifsicle: { interlaced: false } // 压缩GIF图像
            })
            .end()
            .enforce('post') // 表示先执行配置在下面那个loader，即image-webpack-loader
    },

打包后
超过10k的图片进行了压缩

其中遇到的问题，在用Vue做项目时导入图片出现[object module],图片显示不出来
出错原因：
也是找到了大佬的博客看到的，他说这个是file-loader的版本问题，我现在的file-loader版本是^6.2.0。原来file-loader里面有一个esModule的配置，低版本默认为false，高版本默认为true
1、降低file-loader版本为^4.2.0
2、新版本直接设置esModule的属性为false

标签：cli4,vue,false,image,loader,webpack,file,options
来源： https://blog.csdn.net/qq_40922656/article/details/120434690