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文件夾中創建新文件。

現在，我用dist / bundle.js替換index.html文件的script標記中的index.js。

現在，我在瀏覽器中運行index.html，但是不再直接在瀏覽器控制台中訪問變量a 。 現在它不是全局變量。

我的問題是：是否有通過它我們可以訪問變量的方式a就像我們最初訪問全球范圍內？

我沒有在互聯網上找到確切的答案。 我找到了一個加載器暴露加載器，但它也不能解決我的問題。

Answer 1

當webpack捆綁您的JavaScript時，它將所有單獨的文件/模塊包裝在函數中，因此它們不再在全局范圍內運行，因此，如果要使變量成為全局變量，則必須在window對象上顯式設置它，即

window.a = 1;

這將使a從瀏覽器控制台訪問index.html 。