从 Gulp 生成的源映射未按预期工作

Question

所以我的应用程序运行关闭了一个串联的 admin.bundle.js 文件。我正在使用 webpack 来管理模块，然后使用 gulp-webpack 导入我的 webpack 配置，然后运行 sourcemap 代码：

gulp.task('webpack', function() {
    return gulp.src('entry.js')
    .pipe(webpack( require('./webpack.config.js') ))
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('app/assets/js'));
});

我的 Webpack 配置

var webpack = require('webpack');

module.exports = {
    entry: "./entry.js",
    output: {
        pathinfo: true,
        path: __dirname,
        filename: "admin.bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

问题是当我使用 ChromeDev 工具测试我的应用程序时，各个应用程序模块中的断点不起作用。它们仅在我查看 admin.bundle.js 的源代码时才起作用，这并不理想，因为我需要在代码中搜索特定行以转到 :( 而不是仅仅让断点发生在模块本身内部，这使得调试更容易和更快。

下面调试器在串联 admin.bundle.js 文件内的一个函数上停止

有 tagsDirective.js 模块，这是我希望断点发生的地方:(

有人运行在使用 Webpack 和 Gulp 之前遇到过这个问题吗？

部分admin.bundle和地图文件的截图：

Answer 1

啊想通了，我把 sourcemap 生成代码移回了 webpack，并移出了 Gulp:

var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_DEV || '0');

module.exports = {
    entry: "./entry.js",
    devtool: "source-map",
    output: {
        devtoolLineToLine: true,
        sourceMapFilename: "admin.bundle.js.map",
        pathinfo: true,
        path: __dirname,
        filename: PROD ? "admin.bundle.min.js" : "admin.bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    plugins: PROD ? [
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ] : []
};

gulp.task('webpack', function() {
    return gulp.src('entry.js')
      .pipe(webpack( require('./webpack.config.js') ))
      // .pipe(sourcemaps.init())
      // .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('app/assets/js'));
});

从 Gulp 生成的源映射未按预期工作

Sourcemap generated from Gulp, not working as expected

javascript

gulp

webpack

source-maps

gulp-webpack