保留JSX源代码中Webpack设置的作用域中的变量名

Question

我有一个使用Webpack，Babel和React的Hello World示例。当我在Chrome DevTools中设置断点时，Chrome表示当前范围内未定义所有导入的符号。

如果我让代码运行，它会按预期工作。 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
                }
            }
        ]
    }
};

Answer 1

我也注意到了这一点。如果查看范围中的变量列表，则导入会显示为_React或_react2。

看起来webpack在将所有文件捆绑在一起时重命名了一些变量。源图会使您的断点保持同步，但控制台不会将您的变量名称映射回您的es6源代码。