Я пишу код ES6 и передаю его на ES5 с помощью Babel, а затем minify с помощью Uglify. Все работает с webpack через gulp. Я хотел бы использовать внешние исходные карты (чтобы сохранить размер файла как можно меньше).
Задача gulp довольно простая - все фанки в конфигурации 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
})
]
};
Вышеупомянутое работает и создает рабочие карты источников, но они встроены.
Если я изменяю webpack.config.js, так что он говорит devtool: "#source-map"
, исходная карта создается как отдельный файл (используя sourceMapFilename
как имя файла). Но это неприменимо - инструменты Chrome dev, похоже, не понимают этого. Если я удалю webpack.optimize.UglifyJsPlugin
, исходную карту можно использовать, но код не будет уменьшен. Таким образом, исходная карта работает для двух отдельных шагов, но не тогда, когда они выполняются последовательно.
Я подозреваю, что шаг uglify игнорирует внешнюю карту источника с предыдущего шага транспилятора, поэтому исходная карта, которую он создает, основана на потоке, который, конечно, не существует вне gulp. Следовательно, непригодная исходная карта.
Я новичок в webpack, поэтому, возможно, мне не хватает чего-то очевидного.
То, что я пытаюсь сделать, похоже на этот вопрос, но с webpack вместо браузера: Gulp + браузерный + 6to5 + исходные карты
Спасибо заранее.