在JSX sourcemap中保留由Webpack設置的範圍中的變量名

我有一個使用Webpack，Babel和React的工作Hello World示例。當我在Chrome DevTools中設置斷點時，Chrome表示當前範圍中所有導入的符號都未定義。在JSX sourcemap中保留由Webpack設置的範圍中的變量名

如果我讓代碼運行，它按預期工作。 React成功呈現「Hello，World！」問題在於Chrome看到了錯誤的範圍。

編輯：這是因爲Webpack重命名我的變量。 如何保存我的變量名稱以便我可以更舒適地進行調試？

我的webpack配置如下。

var path = require('path'); 
var webpack = require('webpack'); 
var BrowserSyncPlugin = require('browser-sync-webpack-plugin'); 

var public_dir = __dirname + '/public'; 

module.exports = { 
    entry: './behavior/house/entry.jsx', 

    cache: true, 
    debug: true, 
    devtool: 'source-map', 

    output: { 
     path: __dirname + '/public', 
     filename: 'behavior.js', 
     sourceMapFilename: 'behavior.js.map' 
    }, 

    resolve: { 
     extensions: ['', '.js', '.jsx'], 
     root: [ 
      path.resolve('./behavior/house'), 
      path.resolve('./behavior/vendor') 
     ] 
    }, 
    devServer: { 
     contentBase: public_dir, 
     filename: 'behavior.js', 
     host: '0.0.0.0', 
     colors: true, 
     noInfo: true 
    }, 
    plugins: [ 
     new BrowserSyncPlugin({ 
      host: 'localhost', 
      port: 3000, 
      server: { baseDir: [public_dir] } 
     }) 
    ], 
    module: { 
     preLoaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'source-map' 
      } 
     ], 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       cacheable: true, 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015', 'react'], 
        retainLines: true, 
        cacheDirectory: true 
       } 
      } 
     ] 
    } 
};

來源

2016-02-21 Sage Gerard