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

2021-09-23 15:06:31 阅读：295 来源： 互联网

标签：cli4 vue false image loader webpack file options

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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