Sourcemaps 不适用于 gulp 中的 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

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