javascript - Webpack 和源 map ？

Question

我目前正在使用 windows.onerror 来记录生产中的 javascript 错误。我正在使用 webpack 来捆绑我们的 javascript 并使用 uglify 插件来缩小。不幸的是 ErrorEvent对象的 lineno 和 columno 来自 webpack 生成的缩小的 blob。 Webpack 正在生成其默认的源映射文件。有没有办法得到正确的 lineno 和 columno？

w.addEventListener("error", handleError, true);

function handleError(e) {

    let errorToLog = {};

    if (e.message) {
        errorToLog.ErrorMessage = e.message;
    }

    if (e.filename) {
        errorToLog.source = e.filename;
    }

    if (e.lineno) {
        errorToLog.lineNumber = e.lineno;
    }

    if (e.colno) {
        errorToLog.columnNumber = e.colno;
    }

    if (e.error.stack) {
        errorToLog.stackTrace = e.error.stack;
    }

Answer 1

使用 webpack 的 `devtool'添加源 map 的设置:

{
    devtool: "#inline-source-map"
}

请注意，使用完整的源映射会增加转译时间的开销，因此如果您在开发过程中可以不用列号，请使用更快的 cheap-module-inline-source-map相反:

{
    devtool: "#cheap-module-inline-source-map"
}