Question

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

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，则会收到如上所述的错误。

在初始页面加载中，console.log（foo）语句的'bar'输出引用了index.js：2 [[webpack：///./src/js/index.js]] < / p>

为什么尝试从控制台访问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)

使用webpack-dev-server在chrome中进行调试：未捕获的参考错误，{variable}未定义

2 个答案: