Webpack 的作用域有问题

Question

有几个模块连接到app.js，例如里面的代码：

var test = "TEST"; 

这是我的 webpack.config：

module.exports = {
    entry: './src/app.js',
    output: {
        filename: './dist/bundle.js'
    }
};

问题是当我尝试在开发者控制台中调用我的测试变量时，我得到一个错误：

关于范围的问题，当我直接连接 app.js 时 - 一切正常，有什么问题以及如何解决？

Answer 1

是的，这是一个范围问题。有两种方法可以解决此问题：

1. 不要使用var，而是使用window.。 (window.test = "TEST";)
2. 忘记var（在严格模式下不工作）。test = "TEST";
3. 在<script src="bundle.js"></script> 之前，声明test (var test;) 然后忘记var。

希望这是您正在寻找的答案。

Answer 2

webpack 的默认功能是限定传入其配置的文件，请参阅此处的文档：https://webpack.js.org/configuration/output/

这意味着，如果您在文件中设置var，然后将其与 webpack 捆绑，它将仅在其范围内可用，在本例中为 app.js 文件。如果您自己在浏览器中打开文件，则不会进行范围界定，因此直接查看时不会出现任何问题。

如果您需要在文件之外访问该测试变量，则必须将其转换为全局变量，否则它将保持在从 webpack 创建的 bundle.js 文件的范围内。