title: webpack css background image not showing?
body: <p>I have created the html boilerplate with webpack. The problem which i'm facing is, if i call image in scss like "background: url('/img/img.png');" it doesn't taking. Here, I've attached the webpack file and folder structure. I used to try with "url-loader", this is also not working. Please help someone to fix this issue, because i have been tried so long to get this done but still can't able to find the solution.</p>
  
  <p>This is my folder structure,</p>
  
  <pre><code>Project
       |   
       +-- html
       |  |  
       |  +-- css
       |  +-- img
       |  +-- js
       |  +-- index.html
       |    
       +-- src
       |  |  
       |  +-- js
       |  +-- scss
  </code></pre>
  
  <p><strong>webpack file</strong></p>
  
  <pre><code>'use strict';
  let webpack = require('webpack');
  let path = require('path');
  let nodeModulesPath = path.join(__dirname, 'node_modules');
  let ExtractTextPlugin = require("extract-text-webpack-plugin");
  let exp = []; // multiple exports array
  
  // Exports configs for each language
  let configs = [
      {
          name: 'min',
          entry: './src/index.js',
          scssRule: {
              test: /\.scss$/,
              use: ExtractTextPlugin.extract({
                  use: [{
                      loader: "css-loader",
                      options: { minimize: true },
                  },
                  {
                      loader: "sass-loader",
                      options: { minimize: true },
                  },
                  ],
                  fallback: "style-loader"
              }),
          }
      }
  ];
  
  // Generate exports module for each config
  for (let c of configs) {
      var e = {
          context: __dirname,
          watch: true,
          entry: c.entry,
          output: {
              path: path.resolve(__dirname, 'html/'),
              //pathinfo: true,
              filename: "js/app.js"
          },
          module: {
              rules: [{
                  enforce: 'pre',
                  test: /\.js$/,
                  exclude: /node_modules/,
                  loader: "jshint-loader"
              },
              {
                  test: /\.css$/,
                  use: ExtractTextPlugin.extract({
                      use: [{
                          loader: "css-loader",
                          options: { minimize: true },
                      }],
                      fallback: "style-loader"
                  }),
              },
              c.scssRule,
              {
                  test: /\.(ttf|eot|woff|woff2|svg)$/,
                  loader: 'file-loader',
                  options: {
                      name: '../[path].[ext]',
                      publicPath: '../',
                      emitFile: false
                  },
              },
              {
                  test: /\.(jpe?g|png|gif|svg)$/i,
                  loader: 'file-loader',
                  options: {
                      name: '../[path].[ext]',
                      publicPath: '../',
                      emitFile: false
                  },
              }
              ]
          },
          // Use the plugin to specify the resulting filename (and add needed behavior to the compiler)
          plugins: [
              new ExtractTextPlugin({
                  filename: 'css/app.css'
              }),
              new webpack.optimize.UglifyJsPlugin({
                  compressor: { warnings: false }
              })
          ]
      }
      exp.push(e);
  }
  
  module.exports = exp;
  </code></pre>