webpack devtools中使用eval映射原始代码?

webpack官方文档对eval的描述:

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

但是在实际的操作过程中

// webpack.config.js
const path = require('path');

module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
       path: path.resolve(__dirname , 'output'),
       filename: 'main.js',
    },
    devtool:'eval'
}
// ./src/index.js
const test= (content)  => {
    document.querySelector('#app').innerHTML = content;
    console.log111('ffff');
}
test('something')

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

image.png

阅读 552
avatarAI BotBETA

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题