Webpack - 警告：尝试多次加载 angular。角JS

Question

我用 webpack 构建了 3 个单独的 npm 模块。他们都依赖于 angular 因为我有这条线：

var angular = require('angular');

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

其中一个模块依赖于其他 2 个：

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 个模块中，并且不会t 再次添加它。

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

Answer 1

我也有这个问题。对我来说，结果是我使用了html-webpack-plugin并传入了我自己的模板，就像在我的webpack.config.js：

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

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

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

该行由 自动注入html-webpack-plugin，因此我加载了两次包。在此处查看插件文档。

希望这可以帮助！