我正在编写ES6代码并使用Babel将其转换为ES5,然后使用Uglify进行缩小。全部通过gulp与webpack一起运行。我想使用外部源映射(以尽可能减小文件大小)。
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开发工具似乎不理解它。如果我删除webpack.optimize.UglifyJsPlugin
源地图是可用的 - 但代码不会缩小。因此,源映射适用于两个单独的步骤,但不适用于它们按顺序运行。
我怀疑uglify步骤忽略了前一个转换器步骤中的外部源映射,因此它生成的源映射基于流,当然这不存在于gulp之外。因此,无法使用的源地图。
我对webpack很陌生,所以我可能会遗漏一些明显的东西。
我正在尝试做的与此问题类似,但使用webpack而不是browserify:Gulp + browserify + 6to5 + source maps
提前致谢。
答案 0 :(得分:11)
我强烈建议将你的webpack配置放在gulpfile中,或者至少使它成为一个函数。这有一些很好的好处,例如能够将它重用于不同的任务,但具有不同的选项。
我还建议直接使用webpack,而不是使用gulp-webpack
(特别是如果它是你唯一通过的东西)。根据我的经验,这将提供更可预测的结果。使用以下配置,即使使用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 });
});
答案 1 :(得分:1)
我建议使用webpack' devtool: 'source-map'
以下是带有源映射的webpack.config示例:
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: [
]
};