title: Can I monkeypatch a function in another webpack bundle at runtime?
body: <p>I am writing a plugin for a third-party web <code>application</code>, whose code I can see but can't modify. I'm running it in Chrome. The main webapp and the plugin are both (separate) webpack bundles. At runtime when the page loads, the webapp fetches the plugin bundles from the same server, and initialises them.</p>
  <p>My objective is to make my <em>plugin</em> patch/wrap a function in the third-party <em><code>application</code></em>, in the module <code>webapp/utils/target.tsx</code>, such that calls to that function from within the webapp have my modified behaviour. Something like this:</p>
  <pre class="lang-js prettyprint-override"><code>// somehow import the `target` module (this is the problem, see below...)
  
  oldFunc = target.targetFunc;
  target.targetFunc = function targetFunc(args) {
      // do extra stuff here
      return oldFunc(args);
  }
  </code></pre>
  <p>But I don't know how to import the <code>target</code> module or whether this is possible. Specifically:</p>
  <ul>
  <li>I can't just <code>import target</code>, because <code>application/webapp</code> is not a dependency of my plugin
  <ul>
  <li>Plugins are meant to access limited entrypoints that get attached to <code>window</code> by the webapp, so they have no direct dependency on the webapp</li>
  </ul>
  </li>
  <li>I don't think I can add <code>application/webapp</code> as a dependency because
  <ol>
  <li>it's not a published package (perhaps I can add it as a github link?) and</li>
  <li>I don't want webpack to include it in the bundle, so I think I'd have to specify it as an external dependency, but I don't know how to do that...</li>
  </ol>
  </li>
  <li>I can't modify <code>application</code> to do any extra things in its webpack (like exposing <code>target</code> in a different way)</li>
  <li>I thought perhaps I could import it dynamically at runtime:</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>import(/*webpackIgnore: true*/ '/application/webapp/utils/target').then({
      ...
  })
  </code></pre>
  <p>This gives me the error <code>Expected a JavaScript module script but the server responded with a MIME type of &quot;text/html&quot;</code>.</p>
  <p>If it helps, when the page is fully loaded and the app has loaded my plugin, in Chrome developer tools under Sources -&gt; Page, I see a tree structure like this:</p>
  <pre><code>- localhost:port
  - .
  - com.mydomain.myplugin
    - &lt;modules for my plugin&gt;
  - application
    - webapp
      - .
      - &lt;other modules&gt;
      - utils
          - target.tsx
          - &lt;other files&gt;
      - webpack
  </code></pre>
  <p>Meanwhile the original html page source seems to load the webapp via this tag in the header:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;script defer=&quot;defer&quot; src=&quot;/static/main.c4e2eaf1d8c47b01fa6c.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>The Chrome devtools say &quot;Source map detected&quot;.</p>
  <p>Is it even possible to do what I'm trying to do?</p>