angularjs - Webpack - 警告 : Tried to load angular more than once. Angular JS

Question

我用 webpack 构建了 3 个独立的 npm 模块。它们都依赖于 Angular ，因为我有这条线:

var angular = require('angular');

在每个 npm 模块的 Angular 模块定义中。

其中一个模块依赖于另外两个:

var angular = require('angular');
var ngModule = angular.module('topModule', [
    require('dependency1'),
    require('dependency2')
]);

我相信我得到 tried to load angular more than once 错误的原因是因为 Angular 已包含在 webpack 构建的所有 3 个包中。

我知道我可以配置 webpack 将 angular 放在一个单独的文件中(例如 vendor.js)，但我认为当我构建顶层文件时，它会看到 Angular 已经被其他 2 个模块包含并且不会再添加它。

如何在所有模块中使用 `require('angular')'，但只在顶层模块中包含一次？

Answer 1

我也有这个问题。对我来说，最终是我使用了 html-webpack-plugin 并传入了我自己的模板，就像在我的 webpack.config.js 中一样:

plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],

在这个模板文件中，我有一行:

<script src="bundle.js"></script>

此行由 html-webpack-plugin 自动注入(inject)，因此我加载了我的包两次。参见 plugin docs here .

希望这对您有所帮助!