बाहरी स्रोत नक्शे, कुरूप बनाना साथ कम करें webpack और घूंट

Question

मैं ES6 कोड लिख रहा हूँ और यह transpile कोलाहल के साथ ES5 के साथ ES6 कोड transpiled, तो। सभी gulp के माध्यम से वेबपैक के साथ भागो। मैं बाहरी स्रोत मानचित्रों का उपयोग करना चाहता हूं (जितना संभव हो सके फाइलसाइज को छोटा रखना)।

घूंट कार्य बहुत बुनियादी है - सभी फैशनेबल सामान 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:

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 फ़ाइल नाम के रूप में)। लेकिन यह उपयोग करने योग्य नहीं है - क्रोम देव उपकरण इसे समझ में नहीं आता है। यदि मैं webpack.optimize.UglifyJsPlugin को हटाता हूं तो स्रोत मानचित्र उपयोग योग्य है - लेकिन कोड को छोटा नहीं किया गया है। तो स्रोत मानचित्र दो अलग-अलग चरणों के लिए काम करता है, लेकिन जब वे अनुक्रम में नहीं होते हैं।

मुझे संदेह है कि uglify कदम पिछले ट्रांसलेटर चरण से बाहरी स्रोतमैप को अनदेखा करता है, इसलिए यह उत्पन्न स्रोत स्रोत स्ट्रीम पर आधारित है, जो निश्चित रूप से गल्प के बाहर मौजूद नहीं है। इसलिए अनुपयोगी स्रोत मानचित्र।

मैं तो मैं कुछ स्पष्ट याद आ रही हो सकता है बहुत webpack के लिए नया हूँ।

मुझे क्या करना कोशिश कर रहा हूँ इस सवाल का समान है, लेकिन browserify के बजाय webpack साथ: Gulp + browserify + 6to5 + source maps

अग्रिम धन्यवाद।

Answer 1

मैं अत्यधिक gulpfile के अंदर अपने webpack config डालने की सलाह देते हैं या कम से कम यह एक समारोह बनाते हैं। इसमें कुछ अच्छे फायदे हैं, जैसे विभिन्न कार्यों के लिए इसका पुन: उपयोग करने में सक्षम होना, लेकिन विभिन्न विकल्पों के साथ।

मैं भी 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 }); 
}); 

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

};