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文件中。