Webpack is loading module twice

Question

I am using webpack to build my angular.js application. Given a simple example:

app.js

var angular = require('exports?window.angular!angular'),
    angularMoment = require('angular-moment');

angular.module('myApp', [angularMoment]);

angular-moment.js

define(['angular', 'moment'], function(angular, moment) {
  // some library code
});

Here two ways of import of angular, with loader and just by name. It causes that angular will be injected to page twice and I see following warning in console:

WARNING: Tried to load angular more than once.

Is there a way to make webpack consider both imports of angular as the same module?

My webpack.conf.js

module.exports = {
  entry: {
    'app': './src/app/app.js'
  },
  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
    ),
    new AngularPlugin()
  ]
};

Answer 1

One option is to have angular be a stand-alone script and have it configured as an external dependency:

module.exports = {
  external: {
      'angular' : 'angular'
  },
  entry: {
    'app': './src/app/app.js'
  },
  plugins: [
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
    ),
    new AngularPlugin()
  ]
};