イメージ用のwebpackパブリックフォルダ

Question

reactを使用するために、WebpackとBabelをノードアプリケーションに追加しました。 私は1つのスクリプトにすべての私のスクリプトをインポートし、このようになりますどのwebpack.config.jsにエントリとして設定します：

module.exports = { 

entry: './src/App.js', 
output: { 
    path: __dirname, 
    filename: 'app.js' 
}, 
module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
    }] 
} 

}; 

のWebPACK-devのサーバーを起動するときに、スクリプトが私の中にある画像を見つけることができませんパブリックフォルダ（サーバーindex.jsの静的フォルダとして指定されています）。私は、publicPath： "/ public /"を出力に追加しようとしましたが、もうapp.jsを見つけることさえできませんでした。 Webpackで自分の画像を使用する最良の方法は何ですか？

Answer 1

ソースディレクトリに入れて、必要とするだけです！

のsrc/exampleImage.jpg =自分のイメージ

のsrc/ExampleImage.js：

import React from 'react'; 
import imageUrl from './exampleImage.jpg'; 

export default class ExampleImage extends React.Component { 
    render() { 
    return <img src={imageUrl} />; 
    } 
} 

は（npm install file-loaderに忘れてはいけない）あなたのローダーアレイに正しいローダーを追加します。

{ 
    test: /\.(jpg|png|gif)$/, 
    loaders: ['file'], 
    } 

あなたは完了です！ Webpackは自動的に画像を正しいディレクトリ（作成されたスクリプトがある場所）にコピーし、imageUrlが正しく動作することを確認します。

クールボーナス：image-webpack-loaderを使用して画像を自動的に縮小し、長期間キャッシュするためのファイルローダーによるファイル名の自動ハッシングなどの処理を行うことができます。詳細については、その文書をチェックしてください！