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

2024-05-20 • 问答

我想从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格式导出，但未进行任何转换。

我已经关注了这些帖子，但是我不明白如何在“非反应性”环境中进行翻译：

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？

最后，我找到了合适的解决方案。对于将来会来这里的人们：

我不再使用image-webpack-loader，而是使用imagemin和imagemin-webp

设置：

1）在执行任何操作之前，请确保已安装imagemin和imagemin-webp。

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

输入['src/images/*.{jpg,png}']到数组，输出'destination'。输出是通过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 } )
    ]
} )

3）在package.json中创建一个专门用于制作的“规范”

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

来源：

Pre & Post Hooks

Imagemin Plugin

Imagemin Webp

尝试一下。 https://github.com/GaoYYYang/image-optimize-loader#3-transform-your-pngjpg-into-webp

启用compress.webp时，它将png / jpg转换为webp文件，并且不会生成png / jpg文件。您的源代码将直接使用webp文件而不是png / jpg。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|webp|git|svg|)$/i,use: [
          {
            loader: `img-optimize-loader`,options: {
              compress: {
                // This will transform your png/jpg into webp.
                webp: true,disableOnDevelopment: true
              }
            },},],};

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

yangshd 回答：Webpack-如何通过image-webpack-loader将jpg / png转换为webp

设置：

来源：

大家都在问