webpack erfordern relativ Bild

Question

Ich habe zwei Dateien:

• ./img/mypic.png
• ./js/help/targets/target.js

In target.js:

<img src={require("../../../img/target.png")} /> 

Mit webpack.config.js:

14 module: { 
15  loaders: [ 
16  { test: /\.js$/, loader: 'jsx-loader?harmony' }, 
17  { test: /\.css$/, loader: 'style-loader!css-loader' }, 
18  { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url-loader?limit=8192' }, 

Die kompiliert das Bild in ./[hash].png.

Jetzt benutze ich react-router, also bin ich bei /help/targets/target und Webpack gibt das Bild diesen Pfad /help/targets/[hash].png wo Hash ist eine sha1 Summe. Ich würde es bevorzugen, wenn es den Pfad /[hash].png gab. Nur

Wie mache ich Webpack verstehen, dass für diese JS-Datei der Dateipfad zum Bild auf die gleiche Weise wie im Browser relativ ist?

Answer 1

Der Trick ist webpack einen config-Tipp zu geben, was seine Wege auf stützen:

Verwendung:

"output": { "publicPath": "/" } 

webpack zu sagen, nicht relativ zu sein.