如何加载图像反应巴别塔

Question

我正在 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';

当我运行默认的反应启动脚本时它们工作正常，但是当我尝试使用这个 webpack 编译时：

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 上加载图像？

Answer 1

如 webpack 文档中所述

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

所以你需要为 png 文件使用加载器，因为 webpack 不知道如何处理该文件。

file-loader

更多关于Loaders

如何加载图像反应巴别塔

how to load image react babel

reactjs

babeljs

electron