title: webpack require relative image
body: <p>I have two files:</p>
  
  <ul>
  <li>./img/mypic.png</li>
  <li>./js/help/targets/target.js</li>
  </ul>
  
  <p>In target.js:</p>
  
  <pre><code>&lt;img src={require("../../../img/target.png")} /&gt;
  </code></pre>
  
  <p>With webpack.config.js:</p>
  
  <pre><code> 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' },
  </code></pre>
  
  <p>Which compiles the image into <code>./[hash].png</code>.</p>
  
  <p>Now, I use <code>react-router</code>, so I'm at <code>/help/targets/target</code> and webpack is giving the image this path <code>/help/targets/[hash].png</code> where hash is a sha1 sum. I would prefer if it gave it the path <code>/[hash].png</code>. Just </p>
  
  <p>How do I make webpack understand that for this js file, the file path to the image is relative in the same way as in the browser?</p>