title: Webpack: cannot resolve module 'file-loader'
body: <p>When I try to build <strong><em>SASS</em></strong> file with webpack, I got the following error:</p>
  
  <blockquote>
    <p>Module not found: Error:Cannot resolve module 'file-loader'</p>
  </blockquote>
  
  <p>note that this issue only happen when i try to load background image using relative path.</p>
  
  <p>this Work fine:</p>
  
  <pre><code>  background:url(http://localhost:8080/images/magnifier.png);
  </code></pre>
  
  <p>this cause the issue:</p>
  
  <pre><code>   background:url(../images/magnifier.png);
  </code></pre>
  
  <p>and this is my project structure</p>
  
  <ul>
  <li>images </li>
  <li>styles</li>
  <li>webpack.config.js</li>
  </ul>
  
  <p>and this is my webpack file:</p>
  
  <pre><code>var path = require('path');
  module.exports = {
      entry: {
          build: [
              './scripts/app.jsx',
              'webpack-dev-server/client?http://localhost:8080',
              'webpack/hot/only-dev-server'
          ]
      },
      output: {
          path: path.join(__dirname, 'public'),
          publicPath: 'http://localhost:8080/',
          filename: 'public/[name].js'
      },
      module: {
          loaders: [
              {test: /\.jsx?$/, loaders: ['react-hot', 'babel?stage=0'], exclude: /node_modules/},
              {test: /\.scss$/, loaders: ['style', 'css', 'sass']},
              {test: /\.(png|jpg)$/, loader: 'file-loader'},
              {test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader'}
          ]
      },
      resolve: {
          extensions: ['', '.js', '.jsx', '.scss', '.eot', '.ttf', '.svg', '.woff'],
          modulesDirectories: ['node_modules', 'scripts', 'images', 'fonts']
      }
  };
  </code></pre>