Zewnętrzne mapy źródłowe dla zminimalizowanego, transpiled kodu ES6 z opakowaniem internetowym i gulpem

Question

Piszę kod ES6 i przenoszę go na ES5 z Babel, a następnie zminimalizuj za pomocą Uglify. Wszystkie działają z pakietem internetowym za pośrednictwem gulp. Chciałbym użyć zewnętrznych map źródłowych (aby zachować możliwie jak najmniejszy rozmiar pliku).

Zadaniem łyk jest dość prosty - wszyscy funky rzeczy jest w config WebPACK:

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

Powyższe działa i tworzy robocze mapy źródłowe - ale są one wbudowane.

Jeśli zmienię plik webpack.config.js, tak aby było napisane devtool: "#source-map", mapa źródłowa jest tworzona jako osobny plik (przy użyciu nazwy pliku sourceMapFilename). Ale nie jest to możliwe do użycia - narzędzia programistów Chrome nie wydają się tego rozumieć. Jeśli usuniemy webpack.optimize.UglifyJsPlugin, mapa źródłowa będzie użyta - ale kod nie jest zminimalizowany. Tak więc mapa źródłowa działa dla dwóch pojedynczych kroków, ale nie wtedy, gdy są one uruchamiane sekwencyjnie.

Podejrzewam, że krok uglify ignoruje zewnętrzny plik z poprzedniej strony transplera, więc generowany przez niego plik jest oparty na strumieniu, który oczywiście nie istnieje poza haustem. Stąd nieużyteczna mapa źródłowa.

Jestem całkiem nowym użytkownikiem pakietu internetowego, więc być może brakuje mi czegoś oczywistego.

Co usiłuję zrobić jest podobna do tej kwestii, ale z WebPacka zamiast browserify: Gulp + browserify + 6to5 + source maps

z góry dzięki.

Answer 1

Gorąco polecam umieszczenie pliku konfiguracyjnego w pliku gulp lub przynajmniej uczynienie go funkcją. Ma to pewne zalety, takie jak możliwość ponownego wykorzystania do różnych zadań, ale z różnymi opcjami.

Polecam również korzystanie z pakietu internetowego bezpośrednio, zamiast korzystać z gulp-webpack (zwłaszcza jeśli jest to jedyna rzecz, przez którą przechodzisz). W moim doświadczeniu da to znacznie bardziej przewidywalne wyniki. O następującej konfiguracji, mapy źródłowe działać dobrze dla mnie, nawet jeśli jest stosowany UglifyJS:

"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

polecam korzystania WebPack na devtool: 'source-map'

Oto przykład webpack.config z mapowaniem źródłowego poniżej:

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

};