Webpack downloads module twice

I am using webpack to create my angular.js application. Consider 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 are two ways to import angular, with a loader and just by name. This causes angular to be entered twice on the page and I see the following warning in the console:

WARNING: Tried to load angular more than once.

Is there a way to get webpack to account for both angular imports 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()
  ]
};
+4
source share
1 answer

One option is to have angular be a stand-alone script and configure it 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()
  ]
};
+2
source

Source: https://habr.com/ru/post/1598706/


All Articles