有问题设置我的WebPack配置图像

Question

我正在将png导入到我的index.js文件中，因此：

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

在我的index.js中进一步调用该文件，因此：

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

我的webpack被配置为：

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-loader"。

只是给出更多上下文，我的文件结构是：

图像 -Clark-logo.pngindex.cssindex.htmlindex.js

有人知道问题可能是什么？

Answer 1

仅用于记录，作为解决问题的解决方案：

url-loader需要使用以下方式安装：npm i url-loader