[英]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 = {
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 +源地圖
提前致謝。
我強烈建議將你的webpack配置放在gulpfile中,或者至少使它成為一個函數。 這有一些很好的好處,例如能夠將其重用於不同的任務,但具有不同的選項。
我還建議直接使用webpack而不是使用gulp 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 });
});
我建議使用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: [
]
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.