使用webpack和gulp缩小，转换ES6代码的外部源映射 [英] External source maps for minified, transpiled ES6 code with webpack and gulp
问题描述
我正在写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 = {
输出：{
文件名：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：{
警告：false
}，
输出：{
评论：false，
分号：true
}，
sourceMap：true
}）
]
};
上述工作和它创建工作源地图 - 但它们是内联的。
如果我更改webpack.config.js，使其显示 devtool：＃source-map，则源地图创建为一个单独的文件（使用 sourceMapFilename 作为文件名）。但它不可用 - Chrome开发工具似乎并不理解它。如果我删除 webpack.optimize.UglifyJsPlugin ，则源地图可用 - 但代码不会缩小。所以源地图适用于两个单独的步骤，但不是当它们按顺序运行时。
我怀疑uglify步骤忽略了以前的转换步骤中的外部源地图，所以它生成的源映射基于流，这当然不存在于吞噬之外。因此，不可用的源地图。
我对webpack很新，所以我可能会漏掉一些明显的东西。 >我试图做的是类似于这个问题，但用webpack而不是browserify： Gulp + browserify + 6to5 +源地图
预先致谢。
我强烈建议将你的webpack配置放入gulp文件中，或者至少使它成为一个函数。这有一些很好的好处，比如能够重用它用于不同的任务，但有不同的选项。
我还建议直接使用webpack而不是使用 gulp-webpack （特别是如果它是唯一通过管道传输的话）。根据我的经验，这将带来更多可预测的结果。使用以下配置，即使在使用UglifyJS时，源映射也可以正常工作：
use strict;
var path = require（path）;
var gulp = require（gulp）;
var gutil = require（gulp-util）;
var webpack = require（webpack）;
函数buildJs（options，callback）{
var plugins = options.minify？ [
新的webpack.optimize.UglifyJsPlugin（{
压缩：{
警告：false，
}，
输出：{
评论：false，
分号：true，
}，
}），
]：[];
webpack（{
entry：path.join（__ dirname，src，index.js），
bail：！options.watch，
watch ：options.watch，
devtool：source-map，
plugins：插件，
输出：{
path：path.join（__ dirname，dist），
文件名：index.js，
}，
模块：{
loaders：[{
loader：babel-loader，
test： /\.js$/，
包括：[
path.join（__ dirname，src），
]，
}]，
}，
}，function（error，stats）{
if（error）{
var pluginError = new gutil.PluginError（webpack，error）;
if回调）{
callback（pluginError）;
} else {
gutil.log（[webpack]，pluginError）;
}
return ;
}
gutil.log（[webpack]，stats.toString（））;
if（callback）{callback（）; }
}）;
$ b $ gulp.task（js：es6，function（callback）{
buildJs（{watch：false，minify：false}，callback）;
}）;
$ b $ gulp.task（js：es6：minify，function（callback）{
buildJs（{watch：false，minify：true}，callback）;
}） ;
$ b gulp.task（watch，function（）{
buildJs（{watch：true，minify：false}）;
}）;
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.
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 });
});
这篇关于使用webpack和gulp缩小，转换ES6代码的外部源映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
