Le webpack nécessite une image relative

J'ai deux fichiers:

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

Dans target.js:

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

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

Ce qui compile l'image dans ./[hash].png .

Maintenant, j'utilise le react-router , alors je suis à /help/targets/target et le webpack donne l'image ce chemin /help/targets/[hash].png où hash est une somme sha1. Je préférerais qu'il lui ait donné le chemin /[hash].png . Juste

Comment faire pour que Webpack comprenne que pour ce fichier js, le chemin du fichier vers l'image est relatif de la même manière que dans le navigateur?

L'astuce consiste à donner au webpack un indice de configuration sur lequel s'appuyer sur ses chemins:

Utilisation:

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

Pour dire au webpack qu'il ne soit pas relatif.