从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和map文件的屏幕截图：

- Leon Gaban

Answer 1

我想通了，我把生成sourcemap的代码从Gulp中移到了webpack中：

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'));
});

- Leon Gaban