How to make webpack work with sass and correct image urls?

Question

webpack

I made the following config

'use strict';

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  context: __dirname + '/app/frontend',
  entry:  {
    application: './styles'
  },
  output:  {
    path:     __dirname + '/build/assets',
    publicPath: '/',
    filename: '[name].js'
  },

  module: {

    loaders: [{
      test:   /\.js$/,
      loader: "babel?presets[]=es2015"
    }, {
      test:   /\.scss$/,
      loader: ExtractTextPlugin.extract('css!resolve-url!sass?sourceMap')
    }, {
      test:   /\.(png|jpg|gif|svg|ttf|eot|woff|woff2)$/,
      loader: 'file?name=../images/[name].[ext]'
    }]

  },

  plugins: [
    new ExtractTextPlugin('stylesheets/[name].css', {allChunks: true})
  ]
};

but as a result, sourceMap gets directly into the resulting css file and it grows by 1 mb (with the original 170kb).
Can you tell me how you set up sass&resolve-url?

Answer 1

devtool: 'sourcemap'