title: React Can't import images in any component
body: <p>Starting of with my webpack.config:</p>
  
  <hr>
  
  <pre><code>{
     test: /\.(jpg|png)$/,
     use:{
            loader: "file-loader",
            options: {},
     },
  },
  </code></pre>
  
  <p>And in any of my components: </p>
  
  <hr>
  
  <pre><code>import img from'../images/test.png';
  </code></pre>
  
  <p>I have no idea why this happens. I've used this loader several times but I've never encountered this problem. The moment I include an <strong><em>.png</em></strong> image I get the following error message:</p>
  
  <blockquote>
    <p>_react-setup/dist/app/images/test.png:1 (function (exports, require, module, __filename, __dirname) { �PNG
                                                                  ^</p>
    
    <p>SyntaxError: Invalid or unexpected token</p>
  </blockquote>
  
  <p>I'm not doing anything crazy atm. Just a small node server, react, react dom and styled-components.</p>
  
  <p>Does anyone know what happens and how to solve it? I also tried to put the images in a different dir but nothing really helped.</p>
  
  <p>Thanks in advance</p>
  
  <p>Full webpack.config</p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
    entry: './src/client/index.jsx',
    output: {
      filename: 'dist/public/bundle.js',
    },
    resolve: {
      extensions: ['.js', '.jsx', '.json'],
    },
  
    module: {
      rules: [
        {
          test: /\.jsx$/,
          include: [
            path.resolve(__dirname, 'src')
          ],
          exclude: [
            path.resolve(__dirname, 'node_modules')
          ],
          loader: "babel-loader",
          options: {
            presets: ["es2015", "react", "stage-2"],
          }
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: 'file-loader',
              options: {}
            }
          ]
        },
      ]
    },
  }
  </code></pre>