web-dev-qa-db-fra.com

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

Qui compile l'image en ./[hash].png.

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

Comment puis-je faire comprendre à webpack que pour ce fichier js, le chemin du fichier vers l'image est relatif de la même manière que dans le navigateur?

javascriptwebpackimage-loadingurlloader
21
Henrik

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

Utilisation:

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

Dire à webpack de ne pas être relatif.

19
Henrik