Webpack源映射在chrome中无法正常工作

Question

我在调试Chrome时遇到了一些非常意外的行为。

当我将鼠标悬停在某些东西上时，我会遇到这个奇怪的问题，如此截图所示（图中鼠标悬停在this.props中的道具上） 请注意我在图像中如何在控制台中键入this.props并正确显示值。

它也不会将断点放在很多行上，而是将它们放在其他地方。

最后也许是最重要的。 在这样的一行：<QuizQuestionImage updateQuestionIdHandler={(newQuestionId) => this.updateQuestionIdHandler(newQuestionId)} />我可以设置一个断点。当代码工作时，它会在调用updateQuestionIdHandler时触发。但是，如果调用的方法是：this.updateQuestionIdHandler(newQuestionId)有错误，则断点未正确命中，而是错误在控制台中吐出。

在进入该函数之前它应该已经破坏了这种鄙视，而这反过来又产生了错误。

这是我的webpack配置。

const path = require('path');

module.exports = {
    context: path.join(__dirname, 'Scripts', 'react'),
    entry: {
        client: './client'
    },
    output: {
        path: path.join(__dirname, 'Scripts', 'app'),
        filename: '[name].bundle.min.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        plugins: [require('@babel/plugin-proposal-object-rest-spread')],
                        presets: ["@babel/es2015", "@babel/react", "@babel/stage-0"]
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    externals: {
        react: 'React'
    },
    devtool: 'source-map'
};

Answer 1

使用＆＃34; -d＆＃34;运行webpack param在chrome中提供了第二组源映射，它们可以更好地工作。