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.
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.
Share Improve this question edited Jul 16, 2018 at 0:20 intentionally-left-nil 8,3048 gold badges39 silver badges62 bronze badges asked Jul 15, 2018 at 18:44 Meraj AhmedMeraj Ahmed 2781 gold badge6 silver badges14 bronze badges 8- 1 what do you need the global var for ? I mean what is the use case? – Luillyfe Commented Jul 15, 2018 at 19:44
- 1 Possible duplicate of Define global variable with webpack – intentionally-left-nil Commented Jul 16, 2018 at 0: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 Commented Jul 16, 2018 at 6:51
- Buy after the build what you need for ? Before the build you can still access the var, Right? – Luillyfe Commented Jul 16, 2018 at 7:07
- @Luillyfe I want to minify js file by using UglifyJsPlugin – Meraj Ahmed Commented Jul 16, 2018 at 7:47
1 Answer
Reset to default 12When 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.