問題描述

我正在編寫 ES6 代碼并使用 Babel 將其轉(zhuǎn)換為 ES5，然后使用 Uglify 進行縮小.全部通過 gulp 使用 webpack 運行.我想使用外部源映射(以使文件盡可能小).

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).

gulp 任務(wù)非常基礎(chǔ)——所有時髦的東西都在 webpack 配置中:

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:

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

上述方法有效，它創(chuàng)建了有效的源映射 - 但它們是內(nèi)聯(lián)的.

The above works and it creates working source maps - but they are inline.

如果我將 webpack.config.js 更改為 devtool: "#source-map"，則源映射將創(chuàng)建為單獨的文件(使用 sourceMapFilename作為文件名).但它不可用 - Chrome 開發(fā)工具似乎無法理解它.如果我刪除 webpack.optimize.UglifyJsPlugin 源映射是可用的 - 但代碼沒有被縮小.因此源映射適用于兩個單獨的步驟，但不適用于按順序運行.

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.

我懷疑 uglify 步驟忽略了上一個轉(zhuǎn)譯器步驟中的外部源映射，所以它生成的源映射是基于流的，當(dāng)然在 gulp 之外不存在.因此無法使用源映射.

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.

我對 webpack 還很陌生，所以我可能會遺漏一些明顯的東西.

I'm pretty new to webpack so I may be missing something obvious.

我想要做的是類似于這個問題，但使用 webpack 而不是 browserify:Gulp + browserify + 6to5 + source maps

What I'm trying to do is similar to this question, but with webpack instead of browserify: Gulp + browserify + 6to5 + source maps

提前致謝.

推薦答案

我強烈建議將你的 webpack 配置放在 gulpfile 中，或者至少讓它成為一個函數(shù).這有一些不錯的好處，例如可以將它重用于不同的任務(wù)，但有不同的選項.

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.

我還建議直接使用 webpack，而不是使用 gulp-webpack(特別是如果它是你唯一要通過管道的東西).根據(jù)我的經(jīng)驗，這將給出更可預(yù)測的結(jié)果.通過以下配置，即使使用 UglifyJS，源映射對我來說也能正常工作:

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

這篇關(guān)于使用 webpack 和 gulp 用于縮小、轉(zhuǎn)譯 ES6 代碼的外部源映射的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！