Webpack-警告:尝试多次加载angular.Angular JS

Question

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

var angular = require('angular');

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

其中一个模块依赖于另一个2:

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

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

我知道我本可以将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自动注入的，因此我加载了两次捆绑包。请参阅此处的插件文档。

希望这能有所帮助！

Answer 2

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

（webpack.config.js）

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

它将把所有需要的"angular"引用到根node_module文件夹。只是不要忘记在根目录中将angular添加到您的package.json中，然后运行"npm install"。至于本地包，"lerna bootstrap"、"lerna exec npm install"、"npm run encore｛desire-environment｝"