Webpack

Question

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

在插件文档中写到 webp 附加优化器 "Compress JPG & PNG images into WEBP" (https://github.com/tcoopman/image-webpack-loader#usage) 但在遵循文档步骤后转换不起作用。

文件以 jpg 格式导出，但未进行任何转换。

我已经关注了这些帖子，但我不明白如何在 "non-react" 环境中翻译：

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构建脚本之前创建一个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 } )
    ]
} )

在 package.json 中创建一个 "prescript" 专用于生产

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

来源：

Pre & Post Hooks

Imagemin Plugin

Imagemin Webp

Answer 2

试试这个。 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
              }
            },
          },
        ],
      },
    ],
  },
};

Answer 3

您可以使用 responsive loader。官方文档使用步骤：

添加到 webpack 配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|webp)$/i,
        use: {
          loader: "responsive-loader",
          options: {
            // If you want to enable sharp support:
            adapter: require("responsive-loader/sharp"),
          },
        },
      },
    ],
  },
}

在您的 JavaScript 文件中导入图像：

import responsiveImage from 'img/myImage.jpg?sizes[]=300,sizes[]=600,sizes[]=1024,sizes[]=2048';
import responsiveImageWebp from 'img/myImage.jpg?sizes[]=300,sizes[]=600,sizes[]=1024,sizes[]=2048&format=webp';

// Outputs
// responsiveImage.srcSet => '2fefae46cb857bc750fa5e5eed4a0cde-300.jpg 300w,2fefae46cb857bc750fa5e5eed4a0cde-600.jpg 600w,2fefae46cb857bc750fa5e5eed4a0cde-600.jpg 600w ...'
// responsiveImage.images => [{height: 150, path: '2fefae46cb857bc750fa5e5eed4a0cde-300.jpg', width: 300}, {height: 300, path: '2fefae46cb857bc750fa5e5eed4a0cde-600.jpg', width: 600} ...]
// responsiveImage.src => '2fefae46cb857bc750fa5e5eed4a0cde-300.jpg'
// responsiveImage.toString() => '2fefae46cb857bc750fa5e5eed4a0cde-300.jpg'
...
  <picture>
    <source srcSet={responsiveImageWebp.srcSet} type='image/webp' />
    <img
      src={responsiveImage.src}
      srcSet={responsiveImage.srcSet}
      width={responsiveImage.width}
      height={responsiveImage.height}
      sizes='(min-width: 1024px) 1024px, 100vw'
      loading="lazy"
    />
  </picture>
...

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

Webpack - How to convert jpg/png to webp via image-webpack-loader

javascript

webp

webpack-file-loader

正在设置：

来源：