title: Does webpack remove custom variables or event listeners attached to `window` in production?
body: <h2>The problem:</h2>
  <p>We're facing an issue where any event listeners or global variables we attach to <code>window</code> does not seem to be there in our <code>production</code> build (but they are there in the <code>development</code> build).</p>
  <ul>
  <li>Webpack config: <a href="https://gist.github.com/saadq/9f2f800c88716d11410e63859382f47d" rel="noreferrer">https://gist.github.com/saadq/9f2f800c88716d11410e63859382f47d</a></li>
  <li>Build script: <code>webpack --mode=production</code></li>
  </ul>
  <hr />
  <p><strong>Context</strong>:</p>
  <p>We have a use case where our webapp renders inside a parent app. The parent app basically needs to tell us when we need to render our app. To do this, we have tried using event listeners as well as global functions.</p>
  <h2>How our app is loaded into the parent app</h2>
  <p>To render our webapp inside the parent app, the following happens:</p>
  <ol>
  <li>The parent app makes an HTTP call to <code>myappwebsite.com/asset-manifest.json</code>. This is like the default <code>asset-manifest.json</code> that gets created for any <code>create-react-app</code> webapp.</li>
  <li>The parent app finds the path to the main <code>bundle.js</code> from this asset manifest, and then makes an HTTP call to fetch our <code>bundle.js</code> using this path (e.g. <code>myappwebsite.com/bundle.js</code>).</li>
  <li>They dynamically inject a <code>script</code> tag into their <code>head</code> with its <code>src</code> set to our <code>bundle.js</code> to load our app's bundled javascript.</li>
  <li>They listen for the <code>onload</code> event of this new <code>script</code> element before trying to call any of our code or dispatching any events.</li>
  </ol>
  <h2>Attempt 1</h2>
  <p><strong>Child app:</strong></p>
  <pre><code>// index.tsx
  
  window.addEventListener('renderApp', (event) =&gt; {
    console.log('This is running!'); // This only prints in `development`
    const { rootId } = event.detail;
    ReactDOM.render(&lt;App /&gt;, document.getElementById(rootId));
  })
  </code></pre>
  <p><strong>Parent app:</strong></p>
  <pre><code>// index.tsx
  
  console.log('Dispatch is running!'); // This prints in both `development` and `production`
  const renderEvent = new CustomEvent('renderApp', { detail: rootId: 'root' });
  
  // This runs in the script.onload function to wait for our app to load
  window.dispatchEvent(renderEvent);
  </code></pre>
  <p>This code works in the <code>development</code> build but not in the <code>production</code> build. In <code>production</code>, the dispatch does execute, but for some reason the event listener does not. When we tried to set some breakpoints on the minified production bundle, we noticed that the <code>addEventListener</code> code is there, however it is not actually executing... This is strange because the <code>addEventListener</code> is at the top level of the <code>index.tsx</code> in the child app and is not conditionally added.</p>
  <hr />
  <h2>Attempt 2</h2>
  <p><strong>Child app:</strong></p>
  <pre><code>// index.tsx
  
  window.renderApp = (rootId) =&gt; {
    console.log('Child render is running'); // This only prints in `development`
    ReactDOM.render(&lt;App /&gt;, document.getElementById(rootId));
  })
  </code></pre>
  <p><strong>Parent app:</strong></p>
  <pre><code>// index.tsx
  
  console.log('Render is running!'); // This prints in both `development` and `production`
  
  // This runs in the script.onload function to wait for our app to load
  window.renderApp(rootId);
  </code></pre>
  <p>Same issue here, the code works in the <code>development</code> build but not in the <code>production</code> build. In <code>production</code>, the call goes through but the global function does not seem to be on <code>window</code>. I am able to verify this by printing out <code>window</code> in the console.</p>
  <hr />
  <p>It seems that any globals I set on <code>window</code> or any event listeners I set to it get ignored in the production build. Is this by Webpack's design? Or do you think something is messed up in my config/build script that is causing this to happen?</p>