javascript - webpack构建后访问全局变量

Question

让我有一个包含内容的文件 index.js

var a = 1;

我有 index.html 文件，其中包含 index.js 使用 <script>标签。
当我在浏览器中打开 index.html 页面时， a变量可以直接在浏览器控制台中访问。因为 a具有全局范围，它是全局变量。

现在我正在使用 npm 和 webpack。
我的 package.json 文件内容是

"scripts": {
  "build": "webpack"
},

和 webpack.config.js 文件内容是

module.exports = {
entry: './index.js',
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
}

现在我运行 npm build 然后在名为 bundle.js 的 dist 文件夹中创建新文件。

现在我从 script 替换 index.js带有 dist/bundle.js 的 index.html 文件的标签。

现在我在浏览器中运行 index.html，但变量 a不再直接在浏览器控制台中访问。它现在不是全局变量。

我的问题是:
有什么方法可以访问变量 a就像我们最初访问的那样全局？

我在互联网上没有找到确切的答案。我找到了一个加载器 expose-loader但它也不能解决我的问题。

Answer 1

当 webpack 捆绑你的 javascript 时，它会将你所有的单个文件/模块包装在函数中，因此它们不再在全局范围内运行，因此如果你想使一个变量成为全局变量，你必须在 window 对象上显式设置它，即

window.a = 1;

这将使 a可从浏览器控制台访问 index.html .