前端 - webpack devtools中使用eval映射原始代码？

Question

webpack官方文档对eval的描述：

eval - 每个模块都使用 eval() 执行，并且都有 //# sourceURL。此选项会非常快地构建。主要缺点是，由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。

但是在实际的操作过程中

// webpack.config.jsconst path = require('path');module.exports = {    mode: 'none',    entry: './src/index.js',    output: {       path: path.resolve(__dirname , 'output'),       filename: 'main.js',    },    devtool:'eval'}

// ./src/index.jsconst test= (content)  => {    document.querySelector('#app').innerHTML = content;    console.log111('ffff');}test('something')

为什么能映射到具体的行列信息呢

Answer 1

webpack 的 devtool 配置选项用于控制如何生成 source map，以便在调试时查看和跟踪源代码。eval 选项是一种特殊的 source map 生成方式，它通过使用 eval() 函数执行每个模块的代码，并在代码后面添加 //# sourceURL 来提供源码映射。

虽然 eval 模式比其他模式（如 source-map）运行得更快，但它确实有一些限制。特别是，由于 eval 是将转换后的代码映射到源代码，而不是直接映射到原始源代码，因此它在显示行数和列数时可能会有不准确。这是因为在转换过程中，代码可能会被重新格式化、变量名可能会被改变，这会导致 source map 中的信息与原始代码不匹配。

然而，你提到的情况似乎不符合预期的行为。理论上，使用 eval devtool 应该无法准确地映射到原始代码的行和列信息。你可能看到的是转换后的代码的行和列信息，而不是原始代码的。这可能是 webpack 版本、配置或使用的其他工具（如 Babel 或其他 loader）的影响。

如果你想保留原始代码的行和列信息，并且对性能的影响不是主要考虑因素，那么应该考虑使用 source-map 或 inline-source-map 这样的 devtool 选项，它们可以更准确地映射到原始代码。