javascript - 在reactjs中sourceMapSupport有什么用？

Question

我正在从这里学习服务端渲染 https://www.youtube.com/watch?v=duhudXkHRf4&t=927s

我想知道他为什么在server.js中使用这个？这段代码有什么用？

if (process.env.NODE_ENV === "development") {
     console.log("===============")
     sourceMapSupport.install();
 }

他已经在 webpack.config.js 中生成了 server.js 的源映射，如下所示。

const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");


const browserConfig = {
    entry: "./src/app.js",
    output: {
        path: __dirname,
        filename: "./public/bundle.js"
    },
    devtool: "cheap-module-source-map",
    module: {
        rules: [
            {
                test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                loader: "file-loader",
                options: {
                    name: "public/media/[name].[ext]",
                    publicPath: url => url.replace(/public/, "")
                }
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: "css-loader",
                            options: { importLoaders: 1 }
                        }
                    ]
                })
            },
            {
                test: /js$/,
                exclude: /(node_modules)/,
                loader: "babel-loader",
                query: { presets: ["es2015", "react"]  }
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "public/css/[name].css"
        })
    ]
};

const serverConfig = {
    entry: "./server/index.js",
    target: "node",
    output: {
        path: __dirname,
        filename: "server.js",
        libraryTarget: "commonjs2"
    },
    devtool: "cheap-module-source-map",//here is generated source map.
    module: {
        rules: [
            {
                test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                loader: "file-loader",
                options: {
                    name: "public/media/[name].[ext]",
                    publicPath: url => url.replace(/public/, ""),
                    emit: false
                }
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "css-loader/locals"
                    }
                ]
            },
            {
                test: /js$/,
                exclude: /(node_modules)/,
                loader: "babel-loader",
                query: { presets: ["es2015", "react"]  }
            }
        ]
    }
};

module.exports = [browserConfig, serverConfig];

我将如何使用这个sourceMapSupport.install();请帮助我理解

Answer 1

在 Chrome 中运行项目时，F12 转到控制台。在源选项卡下，您将在左侧看到文件夹列表。在 Webpack 下，您将看到文件列表。您可以通过单击行号来插入中断。

这在故障排除时非常有用，它与 Visual Studio 的做法类似。