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()
  }
}