webpack richiedere immagine relativa

Question

Ho due file:

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

In target.js:

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

Con 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' }, 

Che compila l'immagine in ./[hash].png.

Ora, io uso react-router, quindi sono a /help/targets/target e webpack sta dando all'immagine questo percorso /help/targets/[hash].png dove hash è una somma sha1. Preferirei che gli desse il percorso /[hash].png. Solo

Come faccio a capire che il webpack per questo file js, il percorso del file per l'immagine è relativo allo stesso modo del browser?

Answer 1

Il trucco è quello di dare un webpack config-suggerimento su cosa basare i suoi percorsi on:

Usa:

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

di non dire webpack essere relativo.