Vue-cli Webpack config : how to set correctly the webp-loader

Question

As per webp-loader documentation, I am trying to insert the correct multi-loader parameters in my

vue.config.js

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    loaders: [
      {
        test: /\.(jpe?g|png)$/i,
        loader: multi( 'file-loader?name=[name].[ext].webp!webp-loader?{quality: 95}', 'file-loader?name=[name].[ext]' )
        )
      }
    ]
  }
}

But it seems to be wrong ...

error . = . ReferenceError: multi is not defined

what's wrong with the webp-loader doc ??

thanks for feedback

Answer 1

Directly from the webp-loader docs:

Normally you don't want to convert all of your images to WebP format, you just want to make alternate versions. You can use multi-loader to achieve it:

They tell you that you have to use another loader, multi-loader, to do that.

so the docs imply, but don't directly show, that you actually have to import this loader before, like this:

const multi = require('multi-loader')

(and of course you ran npm install -D multi-loader) before that)