Question

我在用webpack构建webp图像时遇到问题。有SSR反应项目。反应代码示例：

import slotroulette from './slotroulette.png';
import slotrouletteWebp from './slotroulette.webp';

...

  return (
    ...
        <picture>
          <source srcSet={slotrouletteWebp} type="image/webp" />
          <img
            css={{ width: '200px' }}
            src={slotroulette}
            alt="slot-roulette"
          />
        </picture>
    ...
    )
  );
};

示例Webpack配置文件：

{
    test: /\.(jpe?g|gif|svg|ico|png)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          hash: 'sha512',
          digest: 'hex',
          publicPath: `${CDN_HOST}/pub/`,
          outputPath: 'pub/',
          name: '[hash].[ext]',
        },
      },
      {
        loader: 'image-webpack-loader',
        query: {
          mozjpeg: {
            progressive: true,
          },
          gifsicle: {
            interlaced: false,
          },
          svgo: {
            plugins: [
              {
                removeViewBox: false,
              },
            ],
          },
          webp: {
            quality: 80,
          },
        },
      },
    ],
  },

在这种情况下，我有下一个错误：

ERROR in .../slotroulette.webp
Module parse failed: Unexpected character '' (1:6)
You may need an appropriate loader to handle this file type.

如果我将'webp'添加到'test'（test：/.(jpe?g|gif|svg|ico|png|webp)$/，）我将得到下一个问题webpack将webp转换为png无法打开。

Answer 1

这是我格式化jsx的方式。

JSX

<picture>
    <source srcSet={`${baseUrl.public}img/rsgis-logo.webp`} type="image/webp" />
    <source srcSet={`${baseUrl.public}img/rsgis-logo.png`} type="image/png" />
    <img src={`${baseUrl.public}img/rsgis-logo.png`} className="rsgis-logo" alt="RS&amp;GIS Logo" />
</picture>

Webpack

我的webpack有所不同。 webp-loader对我来说效果很好，除了它没有将png传输到输出目录。

使用webp-loader：

loaders: [
  {
    test: /\.(jpe?g|png)$/i,
    loaders: [
      'file-loader',
      'webp-loader?{quality: 80}'
    ]
  }
]

webp-loader将图像转换为webp格式。然后将图像放在output / img目录中（我没有在上面指定输出位置，因为我现在没有代码）

然后将png传送到输出目录，我使用了webpack插件CopyWebpackPlugin。这将获得一个目录并将其放置在输出目录中。

plugins: [
    ...,
    new CopyWebpackPlugin([
        { from: "./src/images/png", to: "./img" }
    ]),
    ...
],

完成此实现后，我决定进行相反的操作。我不喜欢网络加载器。我最终使用webp tool通过CLI转换了图像，并使用CopyWebpackPlugin将webp文件移动到输出目录。然后让webpack使用文件加载器正常处理图像

{
    test: /\.(svg|gif|jpe?g|png)$/i,
    use: [{
        loader: "file-loader",
        options: {
            name: "/img/[name].[ext]"
        }
    }]
},

plugins: [
    ...,
    new CopyWebpackPlugin([
        { from: "./src/images/webp", to: "./img" }
    ]),
    ...
],

希望这会有所帮助！

Webp图像显示不正确

1 个答案: