webpack构建后访问全局变量

Question

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

var a = 1;

我有 index.html 文件，其中包含使用<script>标签的index.js 。当我在浏览器中打开 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用 dist/bundle.js从index.html 文件的标签中替换 index.js 。

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

我的问题是：有没有一种方法可以a像我们最初访问一样全局访问变量？

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

Answer 1

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

window.a = 1;

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