WebPackを使用した開発中の静的資産の処理

Question

WebPackとReactを初めて使用しています。設定が正しく行われています。

私のディレクトリ構造は次のとおりです。

/project/ 
    /src/ 
    index.html 
    app.js 
    /static/ 
    /images 

私の「出力」のWebPACK configセクションは次のとおりです。

output: { 
    filename: 'bundle.js', 
    path: path.join(__dirname, 'dist') 
}, 

私のアプリが正常に動作反応するが、私は、任意の画像が届かないなどのURLを添えて

<img src="/static/images/logo.jpg" /> 

私は画像src値を変更した場合：：など

<img src="/src/static/images/logo.jpg" /> 

は、彼らは動作しますが、もちろん、それは/src/ディレクトリが展開されないため、生産のケースであることを行っていません。私はルートが正しく設定されていないようです。

"静的"ディレクトリを "dist"にコピーするようにWebPackに指示する必要はありますか？または？アドバイスありがとうございます。

Answer 1

、た：https://webpack.github.io/docs/webpack-dev-server.html#content-base

は、その後、私はに私のNPMの起動スクリプトを修正：

"./node_modules/.bin/webpack-dev-server --hot --inline --progress --content-base src/" 

となりまし相対イメージパスが再び幸せです。

Answer 2

import（またはrequire）の画像をwebpackで送信できます。

（file-loaderがインストールされていることを確認してください）のWebPACKの設定にfile-loaderを追加します。

{ 
    test: /\.(png|gif|jpg)$/, 
    include: [ 
    path.join(__dirname, 'static') 
    ], 
    loader: 'file', 
} 

のことができます。その後、import画像：

import Image1 from '../static/images/image1.png'; 

とこのようにそれを使用します。

<img src={Image1} width="64" height="64" /> 

を

Webpackは、インポートされたすべてのイメージを "dist"ディレクトリ。私が実際に何を望むか、いくつかの掘削後