बेबल और वेबपैक का उपयोग करते समय मैं सोर्समैप कैसे उत्पन्न करता हूं?

Question

मैं वेबपैक के लिए नया हूं, और मुझे सोर्समैप उत्पन्न करने के लिए हाथ की आवश्यकता है। मैं webpack serveकमांड लाइन से चल रहा हूं , जो सफलतापूर्वक संकलन करता है। लेकिन मुझे वास्तव में सोर्समैप्स की जरूरत है। यह मेरा है webpack.config.js।

var webpack = require('webpack');

module.exports = {

  output: {
    filename: 'main.js',
    publicPath: '/assets/'
  },

  cache: true,
  debug: true,
  devtool: true,
  entry: [
      'webpack/hot/only-dev-server',
      './src/components/main.js'
  ],

  stats: {
    colors: true,
    reasons: true
  },

  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      'styles': __dirname + '/src/styles',
      'mixins': __dirname + '/src/mixins',
      'components': __dirname + '/src/components/',
      'stores': __dirname + '/src/stores/',
      'actions': __dirname + '/src/actions/'
    }
  },
  module: {
    preLoaders: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'jsxhint'
    }],
    loaders: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel-loader'
    }, {
      test: /\.sass/,
      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
    }, {
      test: /\.scss/,
      loader: 'style-loader!css!sass'
    }, {
      test: /\.(png|jpg|woff|woff2)$/,
      loader: 'url-loader?limit=8192'
    }]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]

};

मैं वेबपैक के लिए वास्तव में नया हूं, और यह देखते हुए कि डॉक्स ने वास्तव में मदद नहीं की है क्योंकि मुझे यकीन नहीं है कि यह समस्या विशिष्ट है।

Comments

FYI करें संस्करण 2 के लिए डिबग न जोड़ें, मुझे मिलाThe 'debug' property was removed in webpack 2.

— 20

संबंधित पोस्ट - eval और eval-source-map का उपयोग करने में क्या अंतर है?

— RBT

Answer 1

स्रोत मानचित्र का उपयोग करने के लिए, आपको devtoolविकल्प मानtrue को उस मूल्य से बदलना चाहिए जो this listउदाहरण के लिए उपलब्ध हैsource-map

devtool: 'source-map'

devtool: 'source-map'- एक SourceMap उत्सर्जित होता है।

Comments

denugसंपत्ति webpack 2 में हटा दिया गया है

— jnns

@jnns इसकी जगह क्या लिया?

— ब्रैड

मैं पुष्टि कर सकता हूं (वेबपैक 3.5): devtoolपर्याप्त है। किसी भी डिबग मूल्य के लिए कोई ज़रूरत नहीं है।

— फ्रैंक नोके

बस यह जोड़ना चाहते हैं कि यदि आप रिएक्ट का उपयोग कर रहे हैं, तो आपको इसके लिए विशिष्ट कॉन्फिग ढूंढना चाहिए (क्रिएट-रिएक्शन-ऐप)।

— भोर

यह वास्तव में फ़ाइल को आउटपुट कहां करता है?

— मेलबर्न डेवलपर

Answer 2

हो सकता है कि किसी और को यह समस्या एक बिंदु पर हो। यदि आप उपयोग करते UglifyJsPluginहैं webpack 2तो आपको sourceMapध्वज को स्पष्ट रूप से निर्दिष्ट करने की आवश्यकता है । उदाहरण के लिए:

new webpack.optimize.UglifyJsPlugin({ sourceMap: true })

Comments

मुझे devtool: 'source-map'इसे काम करने के लिए भी शामिल करना था

— विक

मुझे इसे css और sass लोडर विकल्पों में शामिल करना था।

— d_rail

Answer 3

Sourcemaps के साथ jsx के लिए न्यूनतम वेबपैक कॉन्फिगरेशन:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: `./src/index.jsx` ,
  output: {
    path:  path.resolve(__dirname,"build"),
    filename: "bundle.js"
  },
  devtool: 'eval-source-map',
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

इसे चलाना:

Jozsefs-MBP:react-webpack-babel joco$ webpack -d
Hash: c75d5fb365018ed3786b
Version: webpack 1.13.2
Time: 3826ms
        Asset     Size  Chunks             Chunk Names
    bundle.js   1.5 MB       0  [emitted]  main
bundle.js.map  1.72 MB       0  [emitted]  main
    + 221 hidden modules
Jozsefs-MBP:react-webpack-babel joco$

Answer 4

यदि देव + उत्पादन के लिए अनुकूलन , आप अपने विन्यास में कुछ इस तरह की कोशिश कर सकते हैं:

{
  devtool: dev ? 'eval-cheap-module-source-map' : 'source-map',
}

डॉक्स से:

• devtool: "eval- cheap- मॉड्यूल-सोर्स-मैप" SourceMaps प्रदान करता है जो केवल मैप लाइनें (कोई कॉलम मैपिंग नहीं) और बहुत तेज़ हैं
• devtool: "source-map" मॉड्यूल के लिए SourceMaps को कैश नहीं कर सकता है और चंक के लिए पूरा SourceMap फिर से तैयार करने की आवश्यकता है। यह उत्पादन के लिए कुछ है।

मैं वेबपैक 2.1.0-beta.19 का उपयोग कर रहा हूं

Comments

हाल ही में बिल्ड + पुनर्निर्माण के प्रदर्शन के लिए बहुत सटीक सूची यहां आधिकारिक डॉक्स में है

— फ्रैंक नॉक

devचर सेट कहां / कैसे किया जाता है ?

— क्रिस

विशिष्ट मामलों में आप .envपरिभाषित या म्यूटेशन के लिए फ़ाइलें देख सकते हैं process.env। यह सिर्फ एक उदाहरण है, लेकिन यह इस तरह दिख सकता है:const dev = process.env.development === true

— lfender6445

Answer 5

Webpack 2 पर मैंने सभी 12 devtool विकल्पों की कोशिश की। निम्नलिखित विकल्प कंसोल में मूल फ़ाइल से लिंक करते हैं और लाइन संख्या को संरक्षित करते हैं। नीचे दिए गए नोट को पुनः देखें: केवल लाइनें।

https://webpack.js.org/configuration/devtool

devtool सबसे अच्छा देव विकल्प

                                build   rebuild      quality                       look
eval-source-map                 slow    pretty fast  original source               worst
inline-source-map               slow    slow         original source               medium
cheap-module-eval-source-map    medium  fast         original source (lines only)  worst
inline-cheap-module-source-map  medium  pretty slow  original source (lines only)  best

केवल लाइनें

स्रोत मानचित्र प्रति पंक्ति एकल मानचित्रण के लिए सरल किए जाते हैं। यह आमतौर पर प्रति कथन एक एकल मानचित्रण का अर्थ है (आप लेखक इस तरह से हैं)। यह आपको स्टेटमेंट लेवल पर डिबगिंग एग्ज़ाम्पल और किसी लाइन के कॉलम पर सेटिंग्स ब्रेकप्वाइंट से रोकता है। कम से कम के साथ संयोजन संभव नहीं है क्योंकि कम से कम आमतौर पर केवल एक पंक्ति का उत्सर्जन होता है।

इस पर ध्यान केंद्रित

एक बड़े प्रोजेक्ट पर मुझे लगता है ... eval-source-map पुनर्निर्माण का समय ~ 3.5 s है ... इनलाइन-सोर्स-मैप पुनर्निर्माण समय ~ 7s

Answer 6

यहां तक ​​कि एक ही मुद्दे का सामना करना पड़ा, ब्राउज़र में यह संकलित कोड दिखा रहा था। मैंने वेबपैक कॉन्फिग फ़ाइल में नीचे परिवर्तन किए हैं और यह अब ठीक काम कर रहा है।

 devtool: '#inline-source-map',
 debug: true,

और लोडर में मैंने पहले विकल्प के रूप में बैबल-लोडर रखा

loaders: [
  {
    loader: "babel-loader",
    include: [path.resolve(__dirname, "src")]
  },
  { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
  { test: /\.html$/, loader: 'raw' },
  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
      'file?hash=sha512&digest=hex&name=[hash].[ext]',
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
  },
  {test: /\.less$/, loader: "style!css!less"},
  { test: /\.styl$/, loader: 'style!css!stylus' },
  { test: /\.css$/, loader: 'style!css' }
]

Comments

debugसंपत्ति webpack 2 में हटा दिया गया है

— jnns

+1। includeविकल्प जोड़ना मेरे लिए यह तय है। वेबपैक 2 में यह इस तरह दिखता है:rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")]

— मैट ब्राउन