title: Automatically loading externals with Webpack
body: <p>I've done some searching but was wondering if there's an elegant solution here. When building a Webpack app, it's common to have dependencies that don't need to be compiled/bundled, like jQuery, React, ReactDOM, Angular, or Bootstrap, to name a few. You can list these in your Webpack config file in an <code>externals</code> object, but externals just assumes that these libraries will be available as namespaced globals at runtime.</p>
  
  <p>This means that for each entry in your <code>externals</code> hash, you also need to toss in a script tag in your HTML. This makes sense if you're referencing an external CDN, but I'm thinking this could be automated if all you want to do is copy some dist file from a library in node_modules.</p>
  
  <p>I've been looking for examples of how to do this but I haven't seen any yet. I messed with <a href="https://github.com/sheerun/external-loader" rel="nofollow">external-loader</a> but I haven't had any luck integrating it (the documentation doesn't seem to provide a complete example).</p>
  
  <p>Essentially, this would need to happen:</p>
  
  <ol>
  <li>Libraries that shouldn't be bundled should be added to <code>resolve.alias</code>, e.g. <code>{"react": "react/dist/react.js"}</code></li>
  <li>A loader copies the dist files to the public directory (maybe this could just be done with <a href="https://github.com/webpack/file-loader" rel="nofollow">file-loader</a>?)</li>
  <li>An HTML loader or maybe plugin inserts the script tags before the bundle.js script tag</li>
  </ol>
  
  <p>If something like this doesn't exist, I might look into trying to make one; I'm just posting this here to see if anyone might know of a pre-baked solution, as it seems like it'd be a common problem for building web apps and I figured I'm probably missing something.</p>