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的功能。

在reactjs中使用sourceMapSupport是什么？

1 个答案: