Webpack 两次加载模块

Question

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

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
});

这里有两种导入 angular 的方法，使用加载程序和仅按名称。它导致 angular 将被注入页面两次，我在控制台中看到以下警告：

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()
  ]
};

Webpack 两次加载模块

Webpack is loading module twice

commonjs

angularjs

webpack