vue?cli3配置image-webpack-loader報(bào)錯(cuò)怎么解決

今天小編給大家分享一下vue cli3配置image-webpack-loader報(bào)錯(cuò)怎么解決的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

vue cli3配置image-webpack-loader

vue cli3配置image-webpack-loader對(duì)圖片進(jìn)行壓縮優(yōu)化

安裝

npm install image-webpack-loader --save-dev

配置vue.config.js

chainWebpack: config => {
    config.plugins.delete('prefetch')
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }])
    config.module.rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
  }

重啟項(xiàng)目打包 ok

使用image-webpack-loader壓縮圖片報(bào)錯(cuò)

安裝：請(qǐng)一定使用淘寶鏡像cnpm安裝，否則安裝的包是不完整的

如果之前使用了npm安裝，請(qǐng)先卸載再重新安裝

$ cnpm install image-webpack-loader --save-dev

配置：vue.config.js

chainWebpack: config => {
        const imagesRule = config.module.rule('images')
        imagesRule
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                bypassOnDebug: true
            })
            .end()
    },

報(bào)了莫名其妙的錯(cuò)：

Error: ‘[項(xiàng)目目錄]\node_modules\pngquant-bin\vendor\pngquant.exe’ ????????????????????????е????

解決方法：

卸載了再重新安裝image-webpack-loader

以上就是“vue cli3配置image-webpack-loader報(bào)錯(cuò)怎么解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。