How do I access the global object (window) using webpack?
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.
Answer
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']
}
};