CODEWITHSUNDEEP
javascriptgulpwebpacksource-mapsgulp-webpack
Leon Gaban
Leon Gaban

Reputation: 39044

Sourcemap generated from Gulp, not working as expected

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 enter image description here

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

Anyone run into this problem before with Webpack and Gulp?

Screenshot of part of the admin.bundle and the map file: enter image description here

Upvotes: 3

Views: 310

Answers (1)

Leon Gaban
Leon Gaban

Reputation: 39044

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

Upvotes: 0

Related Questions