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文件夹中创建新文件。

现在，我将index.html文件的script标签中的index.js替换为dist / bundle.js。

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

我的问题是：是否像我们最初访问那样可以全局访问变量a？

我在互联网上找不到确切答案。我找到了装载机expose-loader，但它也无法解决我的问题。

Answer 1

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

window.a = 1;

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