Vue-cli Webpack 配置：如何正确设置 webp-loader

Question

根据 webp-loader documentation，我正在尝试在 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]' )
        )
      }
    ]
  }
}

不过好像不对...

error . = . ReferenceError: multi is not defined

webp-loader 文档有什么问题？？

感谢反馈

Answer 1

直接来自 webp-loader 文档：

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:

他们告诉你，你必须使用另一个加载器，多加载器，才能做到这一点。

所以文档暗示，但没有直接显示，您实际上必须之前导入此加载程序，如下所示：

const multi = require('multi-loader')

(当然还有你运行npm install -D multi-loader)

Vue-cli Webpack 配置：如何正确设置 webp-loader

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

webp

vue.js

webpack-loader

webpack-4