Карты внешнего источника для мини-кода, переданного кода ES6 с webpack и gulp

Я пишу код ES6 и передаю его на ES5 с помощью Babel, а затем minify с помощью Uglify. Все работает с webpack через gulp. Я хотел бы использовать внешние исходные карты (чтобы сохранить размер файла как можно меньше).

Задача 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 dev, похоже, не понимают этого. Если я удалю webpack.optimize.UglifyJsPlugin, исходную карту можно использовать, но код не будет уменьшен. Таким образом, исходная карта работает для двух отдельных шагов, но не тогда, когда они выполняются последовательно.

Я подозреваю, что шаг uglify игнорирует внешнюю карту источника с предыдущего шага транспилятора, поэтому исходная карта, которую он создает, основана на потоке, который, конечно, не существует вне gulp. Следовательно, непригодная исходная карта.

Я новичок в webpack, поэтому, возможно, мне не хватает чего-то очевидного.

То, что я пытаюсь сделать, похоже на этот вопрос, но с webpack вместо браузера: Gulp + браузерный + 6to5 + исходные карты

Спасибо заранее.

Ответы

Ответ 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 });
});

Ответ 2

Я бы порекомендовал использовать 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: [
  ]

};