使用 webpack-dev-server 在 chrome 中调试:未捕获的引用错误，{变量} 未定义

Question

我从 Webpack 和 webpack-dev-server 插件开始，我面临着一些困惑。在使用带有 --watch 和 --open 标志的 npm 脚本启动 webpack-dev-server 后，我注意到我无法使用 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

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

在初始页面加载时，控制台.log(foo( 语句的"bar"输出引用索引.js：2 [[webpack:///./src/js/index.js]]

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

我非常感谢有关如何解决此问题的任何帮助，因为我想我在这里显然遗漏了一些东西。

非常感谢

Answer 1

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

// In your bundle.js, search for a, you'll find the snippet below.
/******/ ([
/* 0 */
/***/ (function(module, exports) {
var a = 1;
console.log(a);
/***/ })
/******/ ]);

Answer 2

您可以简单地将变量导出为全局窗口对象的属性：

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