Javascript 源地图不'；我不能狼吞虎咽地使用咖啡脚本和网页包

我正在用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/'

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

目前在

coffee

目录中，我只有两个文件

main.coffee

和

style.coffee

，我的webpack.config如下所示

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

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

在我添加webpack之前，我的sourcemaps工作正常，我可以轻松地从控制台跟踪所有内容。一旦我添加了webpack，所有console.log都指向

style.coffee

。我注意到在这一点上没有发生缩小

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

网页包配置文件中缺少的

devtool:“源地图”

，网页包配置文件中缺少的

devtool:“源地图”
缺少的
devtool:“源地图”
在网页包配置文件中缺少
devtool:“源地图”
在网页包配置文件中