How do I access the global object (window) using webpack?

Question

I'm trying to interface ActionScript with JavaScript using ExternalInterface and webpack.

ExternalInterface can only provoked (call) functions found on the global object (window). How can I get a webpack module reference on window (global object)?

Allow me to elaborate some, I want to have a namespace for the company (window.companyName) with an interface for ExternalInterface:

window.companyName = { isReady: function() { ... },
                       driver1: function() { ... }, 
                       driver2: function() { ... } }

The ActionScript will drive my JavaScript. The more fundamental question is, how do I set globals using webpack so that ExternalInterface can see them (preferably as exports of a module)?

I've tried using expose-loader, exports-loader imports-loader with no luck. expose-loaderis ideally what I need, but doesn't seem to work. When I set window.companyName in my modules and try to verify it in my chrome console, it results in undefined.

Can you share your loader configuration? – Ricardo Stuven Apr 24 '15 at 21:06 — Ricardo Stuven, Apr 24 '15 at 21:06

score 7 · Answer 1 · answered May 22 '15 at 08:22

Aren't you using webpack-dev-server?

Because when I try webpack command everything is working fine. I'm testing it by typing window.mySampleGlobalVariable in chrome developer tools.

BUT when I run webpack-dev-server command then my window variable is undefined.

I have this sample app:

app.js

window.mySampleGlobalVariable = 'TEST';
console.log('App is ready');

index.html

<!DOCTYPE HTML>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Webpack test</title>
    </head>

    <body>
        Webpack test
        <script src="bundle.js"></script>
    </body>

</html>

webpack.config.js

var path = require('path');

module.exports = {
    entry: './app.js',
    output: {
        filename: './bundle.js'
    },
    resolve: {
        extensions: ['', '.js']
    }
};

score 2 · Answer 2 · edited Jan 26 '16 at 16:04

2

You do have access to window object from your webpacked script. Webpack does not interfere with it since the wrapper function only injects module, exports and __webpack_require__ arguments.

Try it writing a script with a single line accessing window object and then check out the output script.

Your assignment should work, unless the execution never reaches it or some loader is altering the relevant code.

edited Jan 26 '16 at 16:04

Cory House

14,235
13
70
87

answered Apr 24 '15 at 21:33

Ricardo Stuven

4,704
2
34
36

1

Many of the files assumes the ```this``` object to be pointed to ```window``` . How can I make this happen? – Abhinav Singi Jan 06 '16 at 12:38
1

(function(){ console.log(this == window);}).bind(window)(); – Ricardo Stuven Aug 11 '16 at 06:29
webpack does interfere. I'm using AMD modules. Those modules worked outside webpack using `this` as the global object but fail once run through webpack. – gman Dec 23 '16 at 07:36

score 1 · Answer 3 · answered Oct 08 '15 at 12:21

1

If you running webpack-dev-server with the iframe you cannot access the variable via the Chrome console.

answered Oct 08 '15 at 12:21

Fabian Zeindl

5,860
8
54
78

13

Sure you can. You just need to change the context of the dev tools console by changing the dropdown that defaults to ``. Reference: http://stackoverflow.com/a/8581276/188740 – Johnny Oshika Nov 03 '15 at 02:26
I'd like to buy a *facepalm*, Pat. – Seth Dec 03 '15 at 19:23

How do I access the global object (window) using webpack?

3 Answers3

Linked