我这样使用vue.config.js
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
module.exports = defineConfig({
configureWebpack: (config) => {
process.env.NODE_ENV === "production"
? config.plugins.push(
new ImageMinimizerPlugin({
test: /.(jpe?g|png|gif|tif|webp|svg|avif)$/i,
include: undefined,
exclude: undefined,
filter: () => true,
severityError: "error",
minimizerOptions: {
encodeOptions: {
avif: {
cqLevel: 33,
cqAlphaLevel: -1,
subsample: 1,
tileColsLog2: 0,
tileRowsLog2: 0,
speed: 0,
chromaDeltaQ: false,
sharpness: 0,
denoiseLevel: 0,
tune: 0,
},
},
plugins: ["svgo"],
},
loader: true,
filename: "[path][name][ext]",
deleteOriginalAssets: false,
})
)
: console.log("\n Image compression skipped \n");
},
})
但是当我试着yarn build
:
Module Warning (from ./node_modules/image-minimizer-webpack-plugin/dist/loader.js):
Unknown plugin: imagemin-svgo
Did you forget to install the plugin?
You can install it with:
$ npm install imagemin-svgo --save-dev
$ yarn add imagemin-svgo --dev
我试着按照这个主题的唯一答案WARNING in Unknown plugin: imageminSvgo. Did you forget to install the plugin?,但它没有帮助,
安装这个插件没有改变任何东西,也许有另一种方法,我可以最小化SVG和转换我的图像到avif...
1条答案
按热度按时间q3qa4bjr1#
看起来您的代码混合了语法。当您将ImageMinimizerPlugin.loader指定为加载器时,应该使用
minimizerOptions
,可能是沿着以下内容的内容:在示例化
new ImageMinimizerPlugin({})
时,根据official image-minimizer-webpack-plugin documentation中提供的示例,适当的设置似乎使用键minimizer: { options: {...} }
来设置encodeOptions
和plugins
,如示例中所示。