如何在 React 和 Webpack 项目中使用来自sharp模块的图像

Question

这是一个codeandbox，我希望其中的图像由sharp模块处理。我希望它这样做是因为我希望这个模块对我的 React 项目中的所有图像进行网络优化，并将它们转换为 webm。

这是我尝试使用 ImageSharp的相同代码和框

Answer 1

您将需要进行一些更改：

Webpack.config.js

1. 搬去：sharp-loader​rules

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      ...
      {
        test: /\.(gif|jpe?g|png|svg|tiff)(\?.*)?$/,
        loader: "sharp-loader",
        query: {
          name: "[name].[hash:8].[ext]",
          cacheDirectory: true,
          presets: {
            // Preset 1
            thumbnail: {
              format: ["webp", "jpeg"],
              width: 200,
              quality: 60
            },
            // Preset 2
            prefetch: {
              // Format-specific options can be specified like this:
              format: { id: "jpeg", quality: 30 },
              mode: "cover",
              blur: 100,
              inline: true,
              size: 50
            }
          }
        }
      }
    ]
  },
  devServer: {
    ...
  },
  plugins: [
    ...
  ]
};

如果您使用的是Webpack 5：

Rule.query 已弃用，取而代之的是 Rule.options 和 UseEntry.options。

主页.js

1. sharp-loader因此，会将徽标转换为一个对象的数组"outputs":[{"width": 500}]。您将需要使用相应的对象：

import React from "react";
import logo from '../../react-logo.png?{"outputs":[{"width": 500}]}';

export default function Home() {
  return (
    <div>
      <h2>Home</h2>
      <img src={logo[0].url} />
    </div>
  );
}

如果您正在使用它，则require.context其工作方式相同：

import React from "react";

function importAll(r) {
  return r.keys().reduce((curr, key) => ((curr[key] = r(key)), curr), {});
}

const images = importAll(require.context('./images/?{"outputs":[{"width": 200}, {"width": 150}]}', true, /\.png$/));


export default function Home() {
  return (
    <div>
      <h2>Home</h2>
      <img src={images['./react-logo.png'][0].url} />
    </div>
  );
}

Answer 2

我会在根目录中创建一个convert.js来进行文件转换。检查尖锐的文档。

然后在 package.json 中，只需在任何需要图像转换的脚本之前添加“node Convert”，专门启动和构建

    "start": "node convert && react-scripts start",
    "build": "node convert && react-scripts build",

现在，每当您启动本地服务器或构建应用程序时，它都会首先转换图像，然后执行其余操作。

这是一个简单的示例，其中convert.js仅将名为1.jpeg的文件转换为尺寸为320x240的output.webp。这完全取决于您如何组织项目中的图像大小、文件夹和文件，以便 covert.js 可以找到它们并正确转换它们。

const sharp = require('sharp');
sharp('1.jpeg')
    .resize(320, 240)
    .toFile('output.webp', (err, info) => { });