Accessing global variable after webpack build

Question

Let I have a file index.js with content

var a = 1;

I have index.html file which include index.js using <script> tag. When I open index.html page in browser, then the a variable can be accessed directly in browser console. Because a have global scope and it is global variable.

Now I am using npm and webpack. My package.json file content is

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

and webpack.config.js file content is

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

Now I run npm build then new file is created in dist folder named bundle.js.

Now I replace index.js from script tag of index.html file with dist/bundle.js .

Now I run index.html in browser, but variable a is no longer access in browser console directly. It is not a global variable now.

My question is : Is there a way by which we can access variable a globally just like we access initially?

I have not found exact answer on internet. I found a loader expose-loader but it also can't solve my problem.

Answer 1

When webpack bundles your javascript it wraps all of your individual files/modules in functions so they are no longer run in the global scope, therefore if you want to make a variable global you have to explicitly set it on the window object, i.e.

window.a = 1;

This will make a accessible from the browser console in index.html.