web-dev-qa-db-ja.com

webpackとgulpを使用して縮小され、積み重ねられたES6コードの外部ソースマップ

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

上記は機能し、機能するソースマップを作成しますが、インラインです。

devtool: "#source-map"と表示されるようにwebpack.config.jsを変更すると、ソースマップは（sourceMapFilenameをファイル名として使用して）別のファイルとして作成されます。しかし、使用できません-Chrome開発ツールはそれを理解していないようです。webpack.optimize.UglifyJsPluginを削除すると、ソースマップは使用できますが、コードは縮小されません。ソースマップは2つの個別のステップで機能しますが、それらが順番に実行される場合は機能しません。

Uglifyステップは前のトランスパイラーステップからの外部ソースマップを無視しているのではないかと思います。そのため、生成されるソースマップはストリームに基づいており、もちろんgulpの外部には存在しません。したがって、使用できないソースマップです。

私はwebpackにかなり慣れていないので、明らかなものがないかもしれません。

私がやろうとしていることはこの質問に似ていますが、browserifyの代わりにwebpackを使用しています： Gulp + browserify + 6to5 + source maps

前もって感謝します。

javascriptgulpminifywebpackbabeljs
24
gotofritz

私はあなたのwebpack設定をgulpfile内に置くか、少なくとも機能させることを強くお勧めします。これにはいくつかの素晴らしい利点があります。たとえば、さまざまなタスクで再利用できますが、オプションは異なります。

また、gulp-webpackを使用する代わりに、直接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 });
});
11
quinnirill

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: [
  ]

};
1
Navela