源映射不适用于gofp中的coffeescript和webpack

Question

我正在用coffeescript编写一个应用程序并使用gulp来构建前端。 我当前的开发版本看起来像这样

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/'

目前在coffee目录中我只有两个文件main.coffee和styles.coffee ，我的webpack.config看起来像这样

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

在我添加webpack之前，我的源图工作正常，我可以轻松地从控制台跟踪所有内容。 一旦我添加了webpack，所有console.log都指向styles.coffee 。 我注意到目前还没有发生缩小。

如何修复构建过程以继续编写模块化应用程序，同时能够使用源图的优点？

Answer 1

缺少devtool: "source-map" webpack配置文件中的devtool: "source-map"