javascript - Webpack - 如何通过 image-webpack-loader 将 jpg/png 转换为 webp

Question

我想从 webpack 的 jpg/png 生成 webp 文件。
为此，我使用 image-webpack-plugin (https://github.com/tcoopman/image-webpack-loader)

在插件文档中，webp 附加优化器“将 JPG 和 PNG 图像压缩到 WEBP”(https://github.com/tcoopman/image-webpack-loader#usage)中写到，但是在遵循文档步骤之后，转换不起作用。

文件以 jpg 格式导出，但没有任何转换。

我已经关注了这些帖子，但我不明白如何在“非 react ”环境中翻译:

Webpack imagemin plugin to compress jpg, png and create webp?

Webpack (Encore): convert images to webp using image-webpack-loader

webpack.config.js

 { 
   test:/\.(gif|png|jpe?g|svg)$/i,
   use:[ 
      { 
         loader:'file-loader',
         options:{ 
            outputPath:'images',
            name:'[name].[ext]'
         }
      },
      { 
         loader:'image-webpack-loader',
         options:{ 
            mozjpeg:{ 
               progressive:true,
               quality:65
            },
            optipng:{ enabled: false },
            pngquant:{ quality: [ 0.65, 0.90 ], speed:4 },
            gifsicle:{ interlaced: false },
            webp:{ quality: 75 }
         }
      }
   ]
}

有没有一种可靠而干净的方法可以通过 webpack 将 jpg/png 文件转换为 webp ？

Answer 1

最后，我找到了一个合适的解决方案。对于将来会来这里的人:
我不再使用 image-webpack-loader 而是 imagemin & imagemin-webp
配置 :

确认您有 imagemin & imagemin-webp在做任何事情之前安装。

创建 webpack.config.prod.js文件以在 webpack 构建脚本之前创建特定的图像转换脚本。

入阵 ['src/images/*.{jpg,png}']是输入，“目的地”是输出。输出通过 src避免在 dist 中加载未使用的内容目录，它允许潜在的 ejs 插件通过“require”命令直接要求 .webp 文件。

const imagemin = require( "imagemin" )
const webp = require( "imagemin-webp" )

imagemin( ['src/images/*.{jpg,png}'], {
    destination: 'src/images',
    plugins: [
        webp( { quality: 60 } )
    ]
} )

在 package.json 中创建“规定”致力于生产

"scripts": {
    "preprod": "node webpack.config.prod.js",
    "prod": "npm webpack"
}

资料来源:
Pre & Post Hooks
Imagemin Plugin
Imagemin Webp