Webpack 和源图？答案

【问题标题】：Webpack & sourcemaps?Webpack 和源图？
【发布时间】：2017-03-14 06:11:39
【问题描述】：

我目前正在使用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;
    }

【问题讨论】：

标签： javascript webpack source-maps

【解决方案1】：

使用 webpack 的 `devtool' 设置添加源映射：

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

请注意，使用完整的源映射会增加转换时间的开销，因此如果您可以在开发期间不使用列号，请改用更快的 cheap-module-inline-source-map：

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

【讨论】：

这是两者的唯一区别吗？
@adam-beck yep。 cheap-source-map 没有 module 部分是 webpack 开始丢弃真实有用的数据的时候。

【解决方案2】：

有很多可能的问题。

最常见的是uglify 现在需要一个显式的sourcemap: true，否则它会破坏您的源映射生成。现在默认是false，因为，呃，原因。

【讨论】：