title: Webpack externals module name with hyphen
body: <p>I'm trying to load angular-ui-router in Webpack as an external dependency. The module name is "angular-ui-router". Here's an example:</p>
  
  <pre><code>module.exports = webpackMerge(commonConfig, {
      ...
      externals: {
          'angular': true,
          'angular-ui-router': true
      },
      ...
  });
  </code></pre>
  
  <p>The problem with this is that Webpack creates a module in my app.bundle.js that looks like the following:</p>
  
  <pre><code>/***/ },
  /* 1 */
  /***/ function(module, exports) {
  
      module.exports = angular;
  
  /***/ },
  /* 2 */
  /***/ function(module, exports) {
  
      module.exports = angular-ui-router;
  
  /***/ }
  /******/ ]);
  </code></pre>
  
  <p>When the browser tries to load the module, it evaluates <code>module.exports = angular-ui-router</code> as an expression, throwing the following error:</p>
  
  <p><code>Uncaught ReferenceError: ui is not defined</code></p>
  
  <p>The only fix I have found for this issue is:</p>
  
  <pre><code>module.exports = webpackMerge(commonConfig, {
      ...
      externals: {
          'angular': true,
          'angular-ui-router': 'window["angular-ui-router"]'
      },
      ...
  });
  </code></pre>
  
  <p>This yields the correct result.</p>
  
  <p>Is there a better way?</p>