webpackは画像をどのように扱いますか？

Question

イメージをバンドルできない場合、イメージはどこに行きますか？あなたのWebPACKの設定で

Answer 1

（ガルプのような）特定のディレクトリにイメージをコピーするのWebPACKは別に、他のプロセスが必要です、次のような、ファイル・ローダーのためのルールを追加する必要があります。

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

ファイルローダーをインストールすることができますhere

Answer 2

多くの場合、画像をインポートする必要があります。あなたのapp.jsの上部にたとえば、あなたのコード内で次に

import '../../../css/bb_client_flow.png'; 

を行うことができ、あなたの資産フォルダ内の画像を参照するタグが含まれます。

<img src="/assets/bb_client_flow.png" className="auth-flow"/> 

これは自動的に資産フォルダにあなたのイメージを配置します。ローダーを使用していて、Webpackの設定でこれを使用している場合。

{ 
     test: /\.(png|jpg|gif|json|xml|ico|svg)$/, 
     use: [ 
      { 
      loader: 'file-loader', 
      options: { 
       name: '[name].[ext]', 
       outputPath: 'assets/', 
       publicPath: '/' 
      } 
      } 
     ] 
     } 

は最後に、私は、画像タグの使用をお勧めしたいと、このようdifferent screen sizesのための異なるサイズの画像の使用は、あなたがデバイスに応じて、時間とUXをロード向上します。

<figure> 
    <picture> 
    <source media="(min-width: 750px)" 
      srcset="images/horses-1600_large_2x.jpg 2x, 
        images/horses-800_large_1x.jpg" /> 
    <source media="(min-width: 500px)" 
      srcset="images/horses_medium.jpg" /> 
    <img src="images/horses_small.jpg" alt="Horses in Hawaii"> 
    </picture> 
    <figcaption>Horses in Hawaii</figcaption> 
</figure>