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.png index.css index.html index.js

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

Answer 1

仅作记录，以解决您的问题：

url-loader需要使用以下命令安装：npm i url-loader

设置图像的Webpack配置时遇到问题

1 个答案: