External source maps for minified, transpiled ES6 code with webpack and gulp

Question

I'm writing ES6 code and transpile it to ES5 with Babel, then minify with Uglify. All run with webpack via gulp. I would like to use external source maps (to keep filesize as small as possible).

The gulp task is pretty basic - all the funky stuff is in the webpack config:

var gulp = require("gulp");
var webpack = require("gulp-webpack");

gulp.task("js:es6", function  () {
  return gulp.src(path.join(__dirname, "PTH", "TO", "SRC", "index.js"))
  .pipe(webpack(require("./webpack.config.js")))
  .pipe(gulp.dest(path.join(__dirname, "PTH", "TO", "DEST")));
});

webpack.config.js:

var path = require("path");
var webpack = require("webpack");

module.exports = {
  output: {
    filename: "main.js",
    sourceMapFilename: "main.js.map"
  },
  devtool: "#inline-source-map",
  module: {
    loaders: [
        { test: path.join(__dirname, "PTH", "TO", "SRC"),
          loader: "babel-loader" }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      output: {
        comments: false,
        semicolons: true
      },
      sourceMap: true
    })
  ]
};

The above works and it creates working source maps - but they are inline.

If I change webpack.config.js so that it says devtool: "#source-map", the source map is created as a separate file (using sourceMapFilename as filename). But it isn't usable - Chrome dev tools doesn't seem to understand it. If I remove the webpack.optimize.UglifyJsPlugin the source map is usable - but the code is not minified. So source map works for the two individual steps, but not when they are run in sequence.

I suspect the uglify step ignores the external sourcemap from the previous transpiler step, so the sourcemap it generates is based on the stream, which of course doesn't exist outside of gulp. Hence the unusable source map.

I'm pretty new to webpack so I may be missing something obvious.

What I'm trying to do is similar to this question, but with webpack instead of browserify: Gulp + browserify + 6to5 + source maps

Thanks in advance.

Answer 1

I highly recommend putting your webpack config inside the gulpfile, or at least make it a function. This has some nice benefits, such as being able to reuse it for different tasks, but with different options.

I also recommend using webpack directly instead of using gulp-webpack (especially if it's the only thing you're piping through). This will give much more predictable results, in my experience. With the following configuration, source maps work fine for me even when UglifyJS is used:

"use strict";

var path = require("path");
var gulp = require("gulp");
var gutil = require("gulp-util");
var webpack = require("webpack");

function buildJs (options, callback) {
    var plugins = options.minify ? [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },

            output: {
                comments: false,
                semicolons: true,
            },
        }),
    ] : [];

    webpack({
        entry: path.join(__dirname, "src", "index.js"),
        bail: !options.watch,
        watch: options.watch,
        devtool: "source-map",
        plugins: plugins,
        output: {
            path: path.join(__dirname, "dist"),
            filename: "index.js",
        },
        module: {
            loaders: [{
                loader: "babel-loader",
                test: /\.js$/,
                include: [
                    path.join(__dirname, "src"),
                ],
            }],
        },
    }, function (error, stats) {
        if ( error ) {
            var pluginError = new gutil.PluginError("webpack", error);

            if ( callback ) {
                callback(pluginError);
            } else {
                gutil.log("[webpack]", pluginError);
            }

            return;
        }

        gutil.log("[webpack]", stats.toString());
        if (callback) { callback(); }
    });
}

gulp.task("js:es6", function (callback) {
    buildJs({ watch: false, minify: false }, callback);
});

gulp.task("js:es6:minify", function (callback) {
    buildJs({ watch: false, minify: true }, callback);
});

gulp.task("watch", function () {
    buildJs({ watch: true, minify: false });
});

Answer 2

I would recommend using webpack's devtool: 'source-map'

Here's an example webpack.config with source mapping below:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: ['./index'],
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'public'),
    publicPath: '/public/'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  },
  plugins: [
  ]

};