title: Excluding Webpack externals with library components / fragments
body: <p>Webpack has been very useful to us in writing isomorphic Javascript, and swapping out <code>npm</code> packages for browser globals when bundling.</p>
  
  <p>So, if I want to use the <code>node-fetch</code> <code>npm</code> package on Node.js but exclude it when bundling and just use the native browser <code>fetch</code> global, I can just mention it in my <code>webpack.config.js</code>:</p>
  
  <pre><code>{
    externals: {
      'node-fetch': 'fetch',
      'urlutils': 'URL',
      'webcrypto': 'crypto', // etc
    }
  }
  </code></pre>
  
  <p>And then my CommonJS requires <code>const fetch = require('node-fetch')</code> will be transpiled to <code>const fetch = window.fetch</code> (or whatever it does).</p>
  
  <p>So far so good. <strong>Here's my question:</strong> This is easy enough when requiring entire modules, but what about when I need to require a submodule / individual property of an exported module?</p>
  
  <p>For example, say I want to use the WhatWG <a href="https://url.spec.whatwg.org/" rel="noreferrer">URL standard</a>, isomorphically. I could use the <code>urlutils</code> <code>npm</code> module, which <code>module.exports</code> the whole URL class, so my requires look like:</p>
  
  <pre><code>const URL = require('urlutils')
  </code></pre>
  
  <p>And then I can list <code>urlutils</code> in my <code>externals</code> section, no prob. But the moment I want to use a more recent (and more supported) <code>npm</code> package, say, <code>whatwg-url</code>, I don't know how to Webpack it, since my requires look like:</p>
  
  <pre><code>const { URL } = require('whatwg-url')
  // or, if you don't like destructuring assignment
  const URL = require('whatwg-url').URL
  </code></pre>
  
  <p>How do I tell Webpack to replace occurrences of <code>require('whatwg-url').URL</code> with the browser global <code>URL</code>?</p>