Возникли проблемы при настройке моего конфига веб-пакета для изображений

Question

Я импортирую PNG в мой файл index.js, таким образом:

import logo from './images/logo.png';

Далее в моем index.js я вызываю файл, таким образом:

<div><img src={logo} alt="Logo" /></div>

Мой веб-пакет настроен следующим образом:

module.exports = {
  module: {
    rules: [
      {
          test: /\.(png|jp(e*)g|svg)$/,  
          use: [{
              loader: 'url-loader',
              options: { 
                  limit: 8000, // Convert images < 8kb to base64 strings
                  name: 'images/[hash]-[name].[ext]'
              } 
          }]
      },
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets:['react']
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: "[name]_[local]_[hash:base64]",
              sourceMap: true,
              minimize: true
            }
          }
        ]
      }
    ]
  },
  plugins: [htmlPlugin]
};

Однако я получаю ошибки, утверждающие, что «url-загрузчик» не может быть разрешен.

Просто чтобы дать больше контекста, мойструктура файла такова:

images - clark-logo.png index.css index.html index.js

Кто-нибудь знает, в чем может быть проблема?

Answer 1

Только для справки, в качестве решения вашей проблемы:

url-loader необходимо установить с помощью: npm i url-loader