Externe Quellkarten für minimierten, transpilierten ES6-Code mit Webpack und Schluck

Question

Ich schreibe ES6-Code und transpile es mit Babel zu ES5, dann minify mit Uglify. Alle laufen mit Webpack via Schluck. Ich würde gerne externe Quellkarten verwenden (um die Dateigröße so klein wie möglich zu halten).

Die schluck Aufgabe ist ziemlich einfach - alle funky stuff in der 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 
    }) 
    ] 
}; 

Die oben genannten Arbeiten und schafft Arbeitskartengrund - aber sie sind inline.

Wenn ich webpack.config.js so ändere, dass devtool: "#source-map" angezeigt wird, wird die Quellzuordnung als separate Datei erstellt (mit sourceMapFilename als Dateiname). Aber es ist nicht verwendbar - Chrome Dev Tools scheint es nicht zu verstehen. Wenn ich die webpack.optimize.UglifyJsPlugin entferne, ist die Quellkarte verwendbar - aber der Code wird nicht minimiert. So funktioniert Source Map für die zwei einzelnen Schritte, aber nicht, wenn sie nacheinander ausgeführt werden.

Ich vermute, dass der Uglify-Schritt die externe Quellkarte aus dem vorherigen transpiler-Schritt ignoriert, so dass die Quellkarte, die generiert wird, auf dem Stream basiert, der außerhalb von Schluck natürlich nicht existiert. Daher die unbrauchbare Quellkarte.

Ich bin ziemlich neu zu Webpack, so dass ich etwas offensichtliches verpassen kann.

Was ich versuche auf diese Frage ähnlich zu tun, sondern mit webpack statt browserify: Gulp + browserify + 6to5 + source maps

Vielen Dank im Voraus.

Answer 1

Ich empfehle dringend, Ihre Webpack-Konfiguration in die Gulp-Datei zu setzen, oder zumindest eine Funktion zu machen. Dies hat einige nette Vorteile, wie die Möglichkeit, es für verschiedene Aufgaben wiederzuverwenden, aber mit verschiedenen Optionen.

Ich empfehle auch die Verwendung von Webpack direkt anstelle von gulp-webpack (vor allem, wenn es das einzige Ding ist, durch das Sie durchgehen). Dies wird meiner Erfahrung nach zu vorhersehbaren Ergebnissen führen. Mit der folgenden Konfiguration Quelle Karten funktionieren gut für mich, auch wenn UglifyJS verwendet wird:

"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

würde ich empfehlen die Verwendung von webpack der devtool: 'source-map'

Hier ist ein Beispiel webpack.config mit Quellenzuordnung unter:

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: [ 
    ] 

};