javascript - 使用 webpack 和 gulp 缩小、转译 ES6 代码的外部源映射

Question

我正在编写 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

提前致谢。

Answer 1

我强烈建议将你的 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 });
});