使用 webpack 和 gulp 用于缩小、转译 ES6 代码的外部源映射 [英] External source maps for minified, transpiled ES6 code with webpack and gulp

问题描述

我正在编写 ES6 代码并使用 Babel 将其转换为 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 任务非常基础——所有时髦的东西都在 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
    })
  ]
};

上述方法有效，它创建了有效的源映射 - 但它们是内联的.

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

如果我将 webpack.config.js 更改为 devtool: "#source-map"，则源映射将创建为单独的文件(使用 sourceMapFilename作为文件名).但它不可用 - Chrome 开发工具似乎无法理解它.如果我删除 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 步骤忽略了上一个转译器步骤中的外部源映射，所以它生成的源映射是基于流的，当然在 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 中，或者至少让它成为一个函数.这有一些不错的好处，例如可以将它重用于不同的任务，但有不同的选项.

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(特别是如果它是你唯一要通过管道的东西).根据我的经验，这将给出更可预测的结果.通过以下配置，即使使用 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 });
});

这篇关于使用 webpack 和 gulp 用于缩小、转译 ES6 代码的外部源映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！