从 Gulp 生成的源图，未按预期工作答案

【问题标题】：Sourcemap generated from Gulp, not working as expected从 Gulp 生成的源图，未按预期工作
【发布时间】：2016-07-20 04:14:25
【问题描述】：

所以我的应用正在运行一个串联的 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 和地图文件的屏幕截图：

【问题讨论】：

标签： javascript gulp webpack source-maps gulp-webpack

【解决方案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'));
});

【讨论】：