angularjs - Webpack 正在加载模块两次

Question

我正在使用 webpack 构建我的 angular.js 应用程序。
举一个简单的例子:

app.js

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

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

Angular 矩.js

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

这里有两种 Angular 的导入方式，使用 loader 和仅按名称。它导致 Angular 将被注入(inject)到页面两次，我在控制台中看到以下警告:

WARNING: Tried to load angular more than once.

有没有办法让 webpack 将 angular 的两个导入视为同一个模块？

我的 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

一种选择是将 angular 设置为独立脚本并将其配置为外部依赖项:

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