source-map-explorer 错误：检查您是否使用了正确的源映射答案

【问题标题】：source-map-explorer error: Check that you are using the correct source mapsource-map-explorer 错误：检查您是否使用了正确的源映射
【发布时间】：2020-01-30 02:35:46
【问题描述】：

我有一个使用带有源映射的 Webpack 4 的 JavaScript 项目：

mode: 'development',
entry: { app: './src/app.js' },
output: {
    filename: 'app.[contenthash].js',
    path: outputPath,
},
devtool: 'sourcemap',
externals,
....

它会在我的dist 文件夹中生成 2 个 JS 文件： app.[contenthash].js 和 app.[contenthash].js.map 附在上面。

我安装了source-map-explorer： https://www.npmjs.com/package/source-map-explorer

但是当我在这些文件上运行它时，我得到了错误：

您的源映射指的是第 17 行生成的第 8 列，但是 source 在该行仅包含 0 列。检查你是使用正确的源映射。

我该如何解决这个问题？

编辑：

当我将 Webpack 的模式更改为 production 时，它不会抛出该错误。为什么？现在使用production 模式，当我运行它时它只是挂起.. 预计需要多长时间？

【问题讨论】：

标签： javascript webpack source-maps

【解决方案1】：

此答案基于 @piecioshka 的 ~ 但禁用列/行映射检查，如 source-map-explorer#README 所示

完整的命令如下：

npx source-map-explorer dist/main.js --no-border-checks

【讨论】：

【解决方案2】：

我有同样的错误。我犯了一个普遍的错误：没有生成缩小版。

source-map-explorer 基于两个文件：

bundle.js — 缩小版本
bundle.js.map — 源映射（为 bundle.js 生成）

步骤 1. 构建 dist 文件 + 源映射

例如。通过webpack

npx webpack -p src/main.js --production --devtool source-map

例如。通过rollup

npx rollup -i src/main.js -o dist/bundle.js -m

第 2 步。审核人

npx source-map-explorer dist/main.js

【讨论】：