画像のwebpack設定の設定に問題があります

debugcn 投稿 Dev

ドロスタン

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

誰かが問題が何であるか知っていますか？

ダミアン・ルルー

念のため、問題の解決策として：

url-loader 以下を使用してインストールする必要があります。 npm i url-loader

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]