title: How to use images in css with Webpack
body: <p>I am making a React w/ Webpack setup and am struggling to do what seems like should be a simple task. I want webpack to include images, and minimize them like I with gulp but I can't figure it out. I just want to be able to link an image in my css like so:</p>
  
  <pre><code>/* ./src/img/background.jpg */
  
  body { background: url('./img/background.jpg'); }
  </code></pre>
  
  <p>I have all of my css/js/img folders inside a src folder. Webpack outputs to a dist folder, but I can't figure out how to get images there.</p>
  
  <p>Here is my webpack setup:</p>
  
  <pre><code> var path = require('path');
   var webpack = require('webpack');
   var HtmlWebpackPlugin = require('html-webpack-plugin');
  
   module.exports = {
    devtool: 'cheap-eval-source-map',
    entry: [
     'webpack-dev-server/client?http://localhost:8080',
     'webpack/hot/dev-server',
     './src/index.js'
    ],
    output: {
    path: path.join(__dirname, 'dist'),
    //  publicPath: './dist',
    filename: 'bundle.js'
    },
    plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
    template: './src/index.html'
     })
    ],
    module: {
    loaders: [{
     exclude: /node_modules/,
     test: /\.js?$/,
     loader: 'babel'
     }, {
    test: /\.scss$/,
    loader: 'style!css!sass'
      }, {
    test: /\.(png|jpg)$/,
    loader: 'file-loader'
    }]
   },
  
   devServer: {
    historyApiFallback: true,
    contentBase: './dist',
    hot: true
    }
  };
  </code></pre>