Webpack - 警告：尝试多次加载 Angular。角 JS答案

【问题标题】：Webpack - WARNING: Tried to load angular more than once. Angular JSWebpack - 警告：尝试多次加载 Angular。角 JS
【发布时间】：2016-07-23 19:53:45
【问题描述】：

我已经用 webpack 构建了 3 个独立的 npm 模块。他们都依赖于角度，因为我有这条线：

var angular = require('angular');

在每个 npm 模块的角度模块定义中。

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

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')'，但在顶级模块中只包含一次？

【问题讨论】：

Webpack 缓存模块，它应该只评估一次模块。此警告不会造成任何伤害，但这表明构建中存在问题。一些依赖可能有自己的angular 模块副本，这会导致类似的事情。如果 semver 限制兼容，npm dedupe 可能会有所帮助。您可以使用github.com/webpack/webpack/issues/690 检查构建，在不了解您的构建的情况下，目前无法提出更具体的建议。
@estus - 感谢您的回复。是的，正如我在原始帖子中提到的，每个依赖项中肯定都包含了 angular。我只是认为 webpack 会让每个包都能够检测到任何重复的模块，并且最终输出中只有一个版本。
不，Webpack 是愚蠢的，它只是从 node_modules 中摄取所有提供给它的东西。幸运的是，它发生在 Angular 上，其他模块只会默默地膨胀这个包。
@estus - 再次感谢。哇，我没有意识到这一点。我最初确实将依赖模块设置为不创建生产构建，所以当我从父模块运行构建时，它会对所有模块使用 require ，因此只包含一次 angular。我发现的问题是，在运行我的测试时，它也会运行子模块的测试。也许我应该研究一种排除子模块中的测试的方法。

标签： angularjs webpack

【解决方案1】：

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

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

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

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

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

希望这会有所帮助！

【讨论】：

【解决方案2】：

对于那些使用 npm 的人，Symfony 中的 webpack encore 由 Lerna 引导的多个本地包：

(webpack.config.js)

...
const path   = require('path');
...
Encore
    ...
    .addAliases({
        'angular': path.resolve(path.join(__dirname, 'node_modules', 'angular'))
    })
    ...

它将所有 require 'angular' 引用到根 node_module 文件夹。只是不要忘记在根目录中将 Angular 添加到您的 package.json 并运行“npm install”。至于本地包，'lerna bootstrap'、'lerna exec npm install'、'npm run encore {desire enviroment}'

【讨论】：