Reactjs 如何加载图像反应巴贝尔

我正在我的app.js上加载图标

import bg from './icons/bg.png';
import br from './icons/br.png';
import rg from './icons/rg.png';
import ig from './icons/invert.png';
import bw from './icons/bw.png';
import by from './icons/by.png';
import gm from './icons/gm.png';
import rs from './icons/rs.png';

当我运行默认的react start脚本时，它们工作正常，但当我尝试使用此网页进行编译时：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/js/index.js',
  devtool: 'inline-source-map',
  target: 'electron-renderer',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [[
              '@babel/preset-env', {
                targets: {
                  esmodules: true
                }
              }],
              '@babel/preset-react']
          }
        }
      },
      {
        test: [/\.s[ac]ss$/i, /\.css$/i],
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      }
    ]
  },
  resolve: {
    extensions: ['.js'],
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'build', 'js'),
  },
};

对于每个图像，我都会得到以下错误：

ERROR in ./src/js/icons/bg.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/js/App.js 2:0-32 230:9-11
 @ ./src/js/index.js 4:0-24 5:107-110

---

可以证明，这意味着babel试图将图像加载为javascript文件，在使用babel编译图像时，有没有办法在React上加载图像？

如webpack文档中所述

开箱即用，webpack只理解JavaScript和JSON文件。

所以你需要使用加载程序来加载png文件，因为网页包不知道如何处理该文件

更多关于