title: Webpack file-loader not loading images, 404 error
body: <p>I am developing a SpringBoot/React project that also uses webpack. I am simply trying to render an image that is stored locally in the project. I have tried using npm's file-loader endlessly, but to no avail. Whenever I run the application, I get a 404 error with the image I am trying to load. </p>
  
  <p>I have also tried using url-loader and image-webpack-loader but both also result in a 404 error. </p>
  
  <p>webpack.config.js</p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
    entry: './src/main/js/index.js',
    devtool: 'sourcemaps',
    cache: true,
    debug: true,
    output: {
      path: __dirname,
      filename: './src/main/resources/static/built/bundle.js',
    },
    module: {
      loaders: [
        {
          test: path.join(__dirname, '.'),
          exclude: /(node_modules)/,
          loader: 'babel',
          query: {
            cacheDirectory: true,
            presets: ['es2015', 'react'],
          },
        },
        {
          test: /\.css$/,
          loaders: ['style-loader', 'css-loader'],
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          loader: 'file-loader',
        },
      ],
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: ['babel-loader', 'eslint-loader'],
        },
        {
          test: /\.(png|jpe?g|gif)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: 'img/[hash]-[name].[ext]',
              },
            },
          ],
        },
      ],
    },
  };
  
  </code></pre>
  
  <p>header.js</p>
  
  <pre><code>import './css/header-style.css';
  import React from 'react';
  import Logout from './Logout';
  import { Link } from 'react-router-dom';
  
  import logo from './img/Logo.png'; // The image I'm trying to load.
  
  /**
   * Renders Logo, header navigation links to other pages, and the logout component.
   */
  function Header() {
    return (
      &lt;div className="row wrapper-header"&gt;
        &lt;nav className="navbar navbar-expand-lg"&gt;
          &lt;a className="navbar-brand" href="#"&gt;
            &lt;img className="logo-width" alt="Logo" src={logo} /&gt;
          ...
  </code></pre>
  
  <p>Project Structure</p>
  
  <pre><code>+-- ProjectFolder
  |   +-- src
  |      +-- main
  |          +-- js
  |              +-- img
  |                  +-- Logo.png
  |              +-- header.js
  |
  |   +-- f5c281d45d55b24ed52c9fee3077f36e.png
  </code></pre>
  
  <p>When I run webpack as well, I can see that it emits the png with the hash it gives it, as such: in the root ProjectFolder directory f5c281d45d55b24ed52c9fee3077f36e.png</p>