从Gulp生成的Sourcemap，不按预期工作 [英] Sourcemap generated from Gulp, not working as expected

问题描述

因此，我的应用程序正在运行连接 admin.bundle.js 文件。我使用webpack管理模块，然后使用

有tagsDirective.js模块，这是我期望的发生的切点:(
p>

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

解决方案

我想到了，我将源代码生成代码移回到webpack中，并退出Gulp：

  var webpack = require（'webpack'）; 
 var PROD = JSON.parse（process.env.PROD_DEV ||'0'）; 
 
 module.exports = {
条目：./entry.js，
 devtool：source-map，
输出：{
 devtoolLineToLine：true，
 sourceMapFilename：admin.bundle.js.map，
 pathinfo：true，
 path：__dirname，
 filename：PROD？ admin.bundle.min.js：admin.bundle.js
}，
模块：{
加载器：[
 {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 '））; 
}）; 
  

So my app is running off a concatenated admin.bundle.js file. I'm using webpack to manage the modules, and then using gulp-webpack to import my webpack config, then run the sourcemap code:

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

My Webpack config

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" }
        ]
    }
};

The problem is when I'm testing my app with ChromeDev tools, the break points in the individual app modules won't work. They only work when I look at the source for admin.bundle.js this isn't ideal as I need to search for a specific line in the code to goto :( instead of just having the break point happen inside of the module itself, which makes it easier and faster to debug.

Below the debugger is stopped on a function inside of the concatenated admin.bundle.js file

There is the tagsDirective.js module, this is where I expect the break point to happen :(

Anyone run into this problem before with Webpack and Gulp?

Screenshot of part of the admin.bundle and the map file:

解决方案

Ah figured it out, I moved the sourcemap generation code back into webpack, and out of 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，不按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！