调试由 webpack 构建的捆绑 javascript 文件时，chrome 不显示原始变量名称

Question

我使用此代码来配置 webpack 5：

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devtool: "source-map"
};

这是我的 index.js 代码，

const bar=require('./bar.js');
let a=1
console.log(a)
bar();

调试时，我无法访问名为“a”的变量

这是webpack的bug吗？我记得几年前我使用 webpack 的早期版本时情况并非如此。

Answer 1

无耻地复制（我自己的）评论......

如果您查看已编译的捆绑包，您就会明白原因 - 我的猜测是，在捆绑期间，webpack 已内联了 的值a并a完全删除了变量声明，如图像左侧的 所示Scope > Local。

您可以以不损坏标识符的方式使用 webpack 捆绑包 - 查看现场可用的选项optimization，例如。minimize: false。