reactjs - Webpack5 - 模块解析失败：意外字符 '�' (1:0) 您可能需要合适的加载器

Question

尝试将本地图像导入我的 React 项目。我正在使用这样的陈述，没什么特别的。

<Image source={require('./redvelvet.png')}></Image>

这是它产生的错误。

ERROR in ./src/components/redvelvet.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./src/components/MachineTemplate.js 157:16-42
 @ ./src/components/App.js 6:0-48 21:28-43
 @ ./src/index.js 1:0-35

我很确定我已将其范围缩小到我的 webpack.config 文件，但对于我的生活，我无法弄清楚我做错了什么。

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$|jsx/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production"),
      },
    }),
  ],
};

任何帮助表示赞赏。感觉就像我在这里想念的一样简单。

标签： reactjswebpackbabeljs