1

我有一个使用 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
                }
            }
        ]
    }
};
4

1 回答 1

1

我也注意到了这一点。如果您查看范围内的变量列表，则导入显示为类似_Reactor _react2。

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

于 2016-02-22T02:56:31.587 回答