vue cli3配置image-webpack-loader方式

Posted on by

vue cli3配置image-webpack-loader

vue cli3配置image-webpack-loader對圖片進行壓縮優化

安裝

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

重啟項目打包 ok

使用image-webpack-loader壓縮圖片報錯

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

如果之前使用瞭npm安裝，請先卸載再重新安裝

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

報瞭莫名其妙的錯：

Error: ‘[項目目錄]\node_modules\pngquant-bin\vendor\pngquant.exe’ �����ڲ����ⲿ���Ҳ���ǿ����еij���

解決方法：

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

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：