vue脚手架配置插件image-webpack-loader 图片压缩

vue脚手架配置插件image-webpack-loader 图片压缩

• 插件名称image-webpack-loader

• 插件文档地址

• vuecli配置文档

我遇到的问题

• 前言:由于没仔细看文档,被坑的挺惨的,网上有很多关于此插件的资料但大多数是粘贴复制的

  • 关于此插件要和file-loader结合使用,不用担心vue使用的url-loader插件里面内置了file-loader,所以你不需要另外安装file-loader插件

  • 关于配置方面我在下面代码中标了出来

  • 直接使用npm官方镜像源安装此插件造成了一些依赖项没能成功安装,所以使用了淘宝镜像源

• 代码

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('min-image')
      .test(/\.(png|jpe?g|gif)(\?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ disable: process.env.NODE_ENV == 'development' ? true : false })//此处为ture的时候不会启用压缩处理,目的是为了开发模式下调试速度更快,网上错误示例直接写为disable:true,如果不去查看文档肯定是要被坑的
      .end()
  }
}