File loader issue with duplicate filenames in dev mode

Created by: arunoda

This happens when there's a media file with the same file name but in different directories. Here's a sample app: https://github.com/arunoda/file-loader-cra-issue

Here's the related code:

import React, { Component } from 'react';
import abcHeader from './abc/header.png';
import bbcHeader from './bbc/header.png';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={abcHeader} alt="ABC Header"/>
          <img src={bbcHeader} alt="BBC Header"/>
        </div>
      </div>
    );
  }
}

export default App;

As you see both pngs has the same name. Now in the dev mode, it tries to load the first file in all the case.

We could easily fix this by hashing the filename in dev mode too. I came across this while playing with React Storybook.