Can not load image file with webpack?
<p>I am trying to load image file in my component like this </p>

<pre><code> const imgTest = require('../../images/online.jpg');
</code></pre>

<p>But it is showing error in server that </p>

<p>SyntaxError: /var/www/html/myProject/src/images/online.jpg: Unexpected character '�' (1:0)
����</p>

<p>This is my webpack.config.js file </p>

<pre><code>var path    = require('path');
var webpack = require('webpack');

module.exports = {
  entry:  [
    'webpack-dev-server/client?http://127.0.0.1:9090/',
    'webpack/hot/only-dev-server',
    './client'
  ],
  output: {
    path:     path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules', 'src','semantic'],
    extensions:         ['', '.js', '.jsx']
  },
  module: {
   /* preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'jshint-loader'

      }
   ],*/
    loaders: [
      {
        test:    /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel']
      },
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&amp;minetype=application/font-woff" },
      { test: /\.(ttf|eot|svg|png|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader?name=[path][name].[ext]" },
      { test: /\.png$/, loader: "url-loader?limit=100000" },
      {
          test: /\.(jpe?g|png|gif|svg)$/i,
          loaders: [
              'url?limit=8192',
              'img'
          ]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
      })
  ],
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    proxy: {
      '*': 'http://127.0.0.1:' + (process.env.PORT || 3300)
    },
    host: '127.0.0.1'
  }
};
</code></pre>

<p>How can I resolved this problem ?</p>