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

Question

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

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

它产生我的2个JS文件dist夹： app.[contenthash].js并app.[contenthash].js.map连接到它。

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

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

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

我该如何解决？

编辑：

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

Answer 1

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

完整命令如下所示：

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

Answer 2

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

\n\n

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

\n\n

\n
• bundle.js\xe2\x80\x94缩小版本
\n
• bundle.js.map\xe2\x80\x94 源映射（为 生成bundle.js）
\n

\n\n\n\n

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

\n\n

例如。通过webpack

\n\n

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

\n\n

例如。通过rollup

\n\n

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

\n\n

步骤 2.审核者

\n\n

npx source-map-explorer dist/main.js\n

\n