使用webpack dev server在chrome中调试：未捕获引用错误，{variable}未定义

我从Webpack和Webpack开发服务器插件开始，我面临一些困惑。在使用带有--watch和--open标志的npm脚本启动webpack dev服务器之后，我注意到我无法使用chrome devtools控制台访问脚本全局范围内声明的任何变量

从package.json中摘录npm脚本

"scripts": {
    "dev": "webpack --env.mode development",
    "live": "webpack-dev-server --env.mode development --watch --open",
    "prod": "webpack --env.mode production"
  },

来自'index.js'的示例代码

const foo = 'bar';
console.log(foo);

控制台输出

bar
>foo
VM1361:1 Uncaught ReferenceError: foo is not defined
    at <anonymous>:1:1
(anonymous) @ VM1361:1

条
>福
VM1361:1未捕获引用错误：未定义foo
时间：1:1
（匿名）@VM1361:1

在初始页面加载时，控制台记录foo的值，即“bar”。 但是如果我试图在控制台中访问foo，我会收到如上所示的错误

在初始页面加载时，console.log（foo）语句的“bar”输出引用index.js:2[[webpack:///./src/js/index.js]]

为什么在尝试（产生错误）从控制台访问foo变量时，它引用的是位置VM1361:1[[debugger:///VM1361:1]]

我真的很感激任何关于如何解决这个问题的帮助，因为我想我显然遗漏了一些东西

---

非常感谢

您看到webpack生成的捆绑文件了吗？你似乎声明了一个全局变量，但实际上，这个变量在IIFE中。它不是全球性的，而是有范围的

//在bundle.js中，搜索a，您将在下面找到代码段。
/******/ ([
/* 0 */
/***/（功能（模块、导出）{
var a=1；
控制台日志（a）；
/***/ })
/******/ ]);您只需将变量导出为全局窗口对象的属性即可：

var window.foo = 'bar';
console.log(window.foo)