J'ai deux fichiers:
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.