webpack не распознает загрузчик файлов

Question

У меня есть проект, реагирующий на webpack и добавляющий изображение, я добавил загрузчик файла и изображение и выдал следующую ошибку:

ERROR in ./src/assets/images/image.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/pages/Home/index.js 26:0-52
 @ ./src/routes.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

мой веб-пакет выглядит так:

  {
    test: /\.(png|svg|jpg|gif)$/,  
    use: [
      'file-loader'
      ]
  }

Если я удаляю файл-загрузчик, ошибка продолжается, тогда проблема в том, что он не распознает файл-загрузчик, но я не могу решить.

Я загружаю изображение вот так, но я пробовал его другими способами, и ошибка всегда одинакова:

import imgHome from "../../assets/images/image.png"

Установленные пакеты:

  "devDependencies": {
"@babel/core": "^7.1.6",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/preset-env": "^7.1.6",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"css-loader": "^2.0.0",
"file-loader": "^3.0.1",
"flow-bin": "^0.86.0",
"flow-typed": "^2.5.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"

Answer 1

Посмотрите на package.json и посмотрите, есть ли file-loader.

Если нет, вам может потребоваться установить его:

npm install file-loader --save-dev

Попробуйте это:

{
    test: /\.(png|jpg|gif)$/,
    use: [
        {
          loader: 'file-loader',
          options: {},
        },
    ],
},