Sourcemaps don't work with coffeescript and webpack in gulp

Question

I am writing an application in coffeescript and using gulp to build the frontend. My current dev build looks like this

gulp.task 'coffee', ->
    gulp.src('./coffee/*.coffee')
        .pipe do plumber
        .pipe sourcemaps.init()
        .pipe coffee bare: true
        .pipe sourcemaps.write()
        .pipe gulp.dest './pre-js/'

gulp.task 'webpack', ['coffee'], ->
    return gulp.src('pre-js/main.js')
        .pipe webpack require './webpack.config.js'
        .pipe gulp.dest 'dist/js/'

currently in coffee directory I only have two files main.coffee and styles.coffee, my webpack.config looks like this

module.exports = {
  entry: "./pre-js/main.js",
  output: {
    path: __dirname,
    filename: "main.js"
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" }
    ]
  },
  target: "web"
};

Before I added webpack my sourcemaps worked and I could easily track everything from the console. Once I added webpack all console.log's are pointing at styles.coffee. I am noting that no minification is happening at this point.

How can I fix my build process to continue writing a modular application while being able to use the goodness of the sourcemaps?

Answer 1

missing devtool: "source-map" in webpack config file