相关疑难解决方法(0)

随着的WebPack-DEV-服务器上运行似乎在输出所有的错误都指向了bundle.js行号,而不是原始源文件.如何获取原始源文件的行号？我正在使用webpack和babel for ES2015 js.

webpack.config.dev.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: '#source-map',
    entry: [
        `webpack-dev-server/client?http://${process.env.npm_package_config_host}:${process.env.npm_package_config_port}`,
        'webpack/hot/only-dev-server',
        'react-hot-loader/patch',
        './src/index.dev'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'     
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new HtmlWebpackPlugin({
            template: 'index.html', // Load a custom template 
            inject: 'body' // Inject all scripts into the body 
        })
    ],
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loaders: ['babel'],
            include: path.join(__dirname, 'src')
        }]
    }
};

server.js

const webpack …

问题

我正在向客户端 React 应用程序添加错误边界。在开发中，我想在浏览器窗口中通过堆栈跟踪显示错误，类似于 create-react-app 或 nextjs 的错误覆盖。使用 webpack 的devtool选项，我能够生成具有正确文件名但行号错误的堆栈跟踪。

// This is what renders in the browser window
Error: You got an error!
    at ProjectPage (webpack-internal:///./src/pages/ProjectPage.tsx:96:11) // <-- 96 is the wrong line

// This is what shows up in the console
Uncaught Error: You got an error!
    at ProjectPage (ProjectPage.tsx?8371:128) // <-- 128 is the correct line

我尝试过的

• 这个答案建议不同的devtool设置，但我尝试过的设置都没有提供正确的行号。
• 这个答案建议更改retainLineswebpack 中的 babel 设置，但我没有使用 babel 来转译我的代码，我正在使用 ts-loader。另外，babel 文档建议这个选项对于不使用源映射的人来说是一个解决方法，这在这里不应该是一个问题。
• 这个答案 …