Javascript 未加载网页包/网页包开发服务的图像

我所有的图片似乎都是404，我想我有正确的路径，因为我只是把它们放在根目录中

我正在使用文件加载器并尝试加载svg文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require('webpack');

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],
  output: {
    // filename and path are required
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        // JSX and JS are all .js
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}  
          }
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ]
};

---

下面是我设置的一个示例：

您需要使用导入

import image from './Freesample.svg'

import image from './Freesample.svg'

像这样使用它

<img src={image}/>

<img src={image}/>

您必须导入：

像这样使用它

<img src={image}/>

<img src={image}/>

---

哦，哇，我不认为我需要像这样导入我自己的图像。之前我只是喜欢在我的例子中使用它。它变了吗？为什么我需要另一个svg加载程序？它已经包括在我的一个了？我仍然不明白为什么我要做一个导入，而以前我不需要做。有什么变化吗？“为什么我需要另一个svg加载程序？”-不幸的是，因为您需要。网页包架构选择，我们无能为力。“它已经包括在我的那本书里了？”-是的。您仍然需要将它们作为对象导入，这样webpack就可以知道依赖项是什么。不幸的是，事情就是这样，我们无能为力。好吧，这让我很惊讶，因为我正在看一个使用Webpack3.8的项目，我不需要做这个导入的东西。必须已在4.0中更改，尽管我为.pngs复制了您的加载程序，并且我当前获取模块解析失败：意外字符'�' （1:0）您可能需要适当的加载程序来处理此文件类型。否，它没有从3>4更改。老实说，这说明不了什么。我不知道。