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.

what do you need the global var for ? I mean what is the use case? — Luillyfe, Jul 15 '18 at 19:44
Possible duplicate of [Define global variable with webpack](https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack) — AnilRedshift, Jul 16 '18 at 00:21
@Luillyfe I have old writtten many js file for a website which are included in html by script tag. Many function and variable are globally define, so that they can access by other included javascript file. — Meraj Ahmed, Jul 16 '18 at 06:51
Buy after the build what you need for ? Before the build you can still access the var, Right? — Luillyfe, Jul 16 '18 at 07:07
Webpack do that for you, check it out to the docs. https://webpack.js.org/guides/production/#minification. try this command, webpack --mode 'production' — Luillyfe, Jul 16 '18 at 15:48
I know this, but global variable and function will not accessed directly — Meraj Ahmed, Jul 17 '18 at 07:01

score 11 · Answer 1 · answered Jul 15 '18 at 23:38

11

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.

answered Jul 15 '18 at 23:38

pretzelhammer

13,874
15
47
98

7

I have many variable and functions defined globally in many files. By this way I have to change at many places of all javascript file. Is there any simple way – Meraj Ahmed Jul 16 '18 at 06:54
Don't know why I didn't think of this. ‍♂️ Sometimes the best answers are the simplest and most obvious. Thank you! :) – rinogo Oct 16 '21 at 23:41

Accessing global variable after webpack build

1 Answers1