Bản đồ nguồn bên ngoài cho mã ES6 đã được rút gọn, được biên dịch bằng gói webpack và gulp

Question

Tôi đang viết mã ES6 và chuyển nó sang ES5 bằng Babel, sau đó rút gọn với Uglify. Tất cả đều chạy với webpack qua gulp. Tôi muốn sử dụng bản đồ nguồn bên ngoài (để giữ cho các tệp càng nhỏ càng tốt).

Nhiệm vụ ngụm là khá cơ bản - tất cả những thứ sôi nổi là trong cấu hình 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 
    }) 
    ] 
}; 

Các công trình trên và nó tạo ra bản đồ nguồn làm việc - nhưng chúng là nội tuyến.

Nếu tôi thay đổi webpack.config.js sao cho nó hiển thị devtool: "#source-map", bản đồ nguồn được tạo dưới dạng tệp riêng biệt (sử dụng sourceMapFilename làm tên tệp). Nhưng nó không thể sử dụng được - các công cụ phát triển Chrome dường như không hiểu nó. Nếu tôi xóa webpack.optimize.UglifyJsPlugin bản đồ nguồn có thể sử dụng được - nhưng mã không được rút gọn. Vì vậy, bản đồ nguồn hoạt động cho hai bước riêng lẻ, nhưng không phải khi chúng chạy theo trình tự.

Tôi nghi ngờ bước uglify bỏ qua sourcemap bên ngoài từ bước transpiler trước đó, do đó, sourcemap nó tạo ra dựa trên luồng, tất nhiên là không tồn tại bên ngoài gulp. Do đó bản đồ nguồn không sử dụng được.

Tôi khá mới mẻ với webpack nên tôi có thể thiếu điều gì đó hiển nhiên.

Những gì tôi đang cố gắng làm là tương tự như câu hỏi này, nhưng với webpack thay vì browserify: Gulp + browserify + 6to5 + source maps

Cảm ơn trước.

Answer 1

Tôi khuyên bạn nên đặt cấu hình webpack của mình bên trong gulpfile hoặc ít nhất là đặt chức năng. Điều này có một số lợi ích tốt đẹp, chẳng hạn như có thể tái sử dụng nó cho các nhiệm vụ khác nhau, nhưng với các tùy chọn khác nhau.

Tôi cũng khuyên bạn nên sử dụng webpack trực tiếp thay vì sử dụng gulp-webpack (đặc biệt nếu đó là điều duy nhất bạn đang đi qua). Điều này sẽ cho kết quả dự đoán nhiều hơn, theo kinh nghiệm của tôi. Với cấu hình như sau, bản đồ nguồn hoạt động tốt đối với tôi ngay cả khi UglifyJS được sử dụng:

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

Answer 2

tôi sẽ khuyên bạn sử dụng webpack của devtool: 'source-map'

Dưới đây là một ví dụ webpack.config với bản đồ nguồn dưới đây:

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

};