我有一个应用程序，我可以在其中添加模块作为 node_modules。现在，这些模块和应用程序使用库 XYZ 作为节点模块。此外，这些模块还有其他节点模块，它们有自己的库 XYZ 作为节点模块。

所以，这大致是我的应用程序结构的样子

我使用 gulp 和 webpack，我正在尝试如何对库 XYZ进行重复数据删除。我想构建一个任务，该任务将遍历节点模块的嵌套树并构建出 XYZ 库的 1 个通用版本。我怎样才能做到这一点？

我尝试使用 deDupePlugin，这是我添加到我的 gulp 默认任务中的所有内容，但它没有工作。我错过了什么吗？

或者，还有其他方法可以实现吗？任何帮助将不胜感激

多个块中的重复代码或非常大的公共块文件

假设我有一个 SPA 网站。我有一个文件main.js，我在其中配置路线。

我使用 webpack 来打包代码。我webpack.config.js的这样

当我运行 webpack 时，各种块都有重复的services/A services/B等代码。这不是我想要的。

我阅读了 webpack 文档，然后minChunks: 2向 CommonsChunkPlugin 添加了选项。

然后我再次运行 webpack。

现在，每个块只有自己的代码。但是我也得到了一个很大的通用块文件，其中包括 services/A、、services/B和services/C其他各种页面文件之间的共享代码。

当我运行这些代码时，在 page/aaa中加载了/aaa's 文件，以及大的公共块文件。

现在最大的问题是，页面/aaa根本不需要services/B和services/C代码，但是公共块文件包含各个页面文件之间的所有共享代码。所以普通的chunk文件很大，而且有很多未使用的代码。

我知道我可以设置minChunks为更大的数字，但这样一来，每个页面文件都可能再次有重复的代码。

帮助

当路由到不同的页面时，我可以有其他方法只加载必要的公共块吗？

使用默认构建设置，我得到以下构建层：(X+A)、(Y+A+B)、(Z+B)。

我想要：（X+A）、（Y+A）、Z、B

当我们询问 Y 和 Z 模块时，B 应该只加载一次。

我找到了CommonsChunkPlugin，但我无法正确配置它。

我有一个应用程序，我必须使用 babel 构建代码并做出反应。该应用程序将使用 gulp 和 webpack 构建，用于自动构建创建和部署。当使用 gulp 和 webpack 将 babel+react 代码转换为浏览器可解释代码时，我们需要使用 npm 安装 react 并且必须在所有文件中导入，示例代码如下：

现在，问题是这个代码在与 webpack 捆绑时，将 react 和 react-dom 库代码捆绑到捆绑文件中。因此，我将无法缓存这些库文件以在不同的视图中加载。因此，相同的库代码将在不同的捆绑文件中一次又一次地加载。有没有办法单独加载这些文件而不是捆绑文件？

这是我的 webpack.config.js 文件：

这是我运行 webpack-dev-server 的脚本：

webpack命令输出很好（bundle.js 和 vendor.bundle.js），但是，开发服务器失败（webpackJsonp is not defined尽管它的内存编译成功）。

从 webpack.config.js 中删除CommonsChunkPlugin时 - 一切正常：

有任何想法吗？

我想将我的供应商代码分成两块，一个包含所有角度库，另一个包含其他所有内容。

我的 Angular 应用程序有一个入口点，并且设置如下：

然后我使用 CommonsChunkPlugin 来配置另外两个包：

这会生成 3 个文件：

app.bundle.js 只包含我的应用程序代码。
vendor.bundle.js 包含所有第 3 方库，不包括有角度的东西
vendor.angular.bundle.js 包含所有有角度的东西和我所有已经在 vendor.bundle.js 中的第 3 方库。

无论如何，只有在 vendor.angular.bundle.js 中捆绑了角度模块，而不自动包含其他 3rd 方库？

我正在关注Maxime Fabre 关于 Webpack 的教程，并试图获得一个非常简单的 webpack 包，它有 1 个入口点和 2 个块来工作。因为这两个块都需要 jquery 和 mustache，所以我使用 CommonsChunkPlugin 将公共依赖项移动到主包文件，就像在教程中一样。我还使用extract-text-webpack-plugin从块中提取样式并将它们放在单独的 CSS 文件中。

我的 webpack.config.js：

入口点中的相关代码（我使用的是 ES6 语法和 babel）：

chunk1 和 chunk2 看起来都像这样：

索引.html：

当我运行webpack捆绑构建就好了。但是，在浏览器中，我得到一个Uncaught TypeError: Cannot read property 'call' of undefined, 仔细检查后，看起来有几个模块最终出现undefined在最终的捆绑包中。

我的错误看起来很像https://github.com/wenbing/webpack-extract-text-commons-chunk-bug。当我禁用 extract-text-webpack-plugin 或 CommonsChunkPlugin 并构建它时，webpack 包运行良好。

然而，即使我正在学习一个包含 2 个非常常见的插件的简单教程，但这个错误似乎很少见，所以我假设我在某个地方搞砸了。是什么赋予了？

我学习 Webpack 已经有一段时间了，遇到了一个奇怪的行为。

如angular.io 上的 Webpack 介绍中所述， 我将所有供应商模块导入vendor.ts-file，所有 polyfills 导入polyfill.ts-file 并在 -file 中初始化我的应用程序main.ts。因此，我在 Webpack 的配置中添加了以下入口点和 CommonsChunkPlugin：

因此，Webpack 应该意识到这一点vendor.ts并app.ts使用通用模块并将其添加到vendor.js-file 中。vendor.ts-file 看起来像这样：

不幸的是，这种行为对我通过 导入的所有模块都按预期import MODULE工作，但对我通过 导入的模块不起作用import * as ALIAS from MODULE。在这个例子中，webfontloader-module 被写入app.js，因为我也在那里导入它，尽管它也应该与vendor.ts-file 共享依赖关系。

当我改变import * as WebFont from 'webfontloader';它let WebFont = require('webfontloader');确实有效。

怎么了？那么为什么所有进口的角度工作呢？

我刚刚意识到，如果您使用 动态加载模块require.ensure()，webpack 将不会一起分析和分块依赖项。这在某种程度上是有道理的，有人可能会争辩说，webpack 无法知道这些模块是否会被传输，但我们是否可以强制 webpack 完成这项工作？

示例是：

应用程序.js：

模块1.js

模块2.js

这个编译的结果是，这两个模块都将整个 socket-io 库“链接”到它们的块中。我最初的期望是，CommonsChunkPlugin会抓住那些requires并将那个大库放入一个公共块中。

然而不起作用。当然，我总是可以手动“解决”这种依赖关系，但我希望 webpack 能以某种方式做到这一点？

I get the general gist that the CommonsChunkPlugin looks at all the entry points, checks to see if there are common packages/dependencies between them and separates them into their own bundle.

So, let's assume I have the following configuration:

If I bundle without using CommonsChunkPlugin

I will end up with 3 new bundle files:

• entry1.bundle.js which contains the complete code from entry1.js and jquery and contains its own runtime
• entry2.bundle.js which contains the complete code from entry2.js and jquery and contains its own runtime
• vendors.bundle.js which contains the complete code from jquery and some_jquery_plugin and contains its own runtime

This is obviously bad because I will potentially load jquery 3 times in the page, so we don't want that.

If I bundle using CommonsChunkPlugin

Depending on what arguments I pass to CommonsChunkPlugin any of the following will happen:

• CASE 1 : If I pass { name : 'commons' } I will end up with the following bundle files:

  • entry1.bundle.js which contains the complete code from entry1.js, a requirement for jquery and does not contain the runtime
  • entry2.bundle.js which contains the complete code from entry2.js, a requirement for jquery and does not contain the runtime
  • vendors.bundle.js which contains the complete code from some_jquery_plugin, a requirement for jquery and does not contain the runtime
  • commons.bundle.js which contains the complete code from jquery and contains the runtime

  This way we end up with some smaller bundles overall and the runtime is contained in the commons bundle. Pretty ok but not ideal.

• CASE 2 : If I pass { name : 'vendors' } I will end up with the following bundle files:

  • entry1.bundle.js which contains the complete code from entry1.js, a requirement for jquery and does not contain the runtime
  • entry2.bundle.js which contains the complete code from entry2.js, a requirement for jquery and does not contain the runtime
  • vendors.bundle.js which contains the complete code from jquery and some_jquery_plugin and contains the runtime.

  This way, again, we end up with some smaller bundles overall but the runtime is now contained in the vendors bundle. It's a little worse than the previous case, since the runtime is now in the vendors bundle.

• CASE 3 : If I pass { names : ['vendors', 'manifest'] } I will end up with the following bundle files:

  • entry1.bundle.js which contains the complete code from entry1.js, a requirement for jquery and does not contain the runtime
  • entry2.bundle.js which contains the complete code from entry2.js, a requirement for jquery and does not contain the runtime
  • vendors.bundle.js which contains the complete code from jquery and some_jquery_plugin and does not contain the runtime
  • manifest.bundle.js which contains requirements for every other bundle and contains the runtime

  This way we end up with some smaller bundles overall and the runtime is contained in the manifest bundle. This is the ideal case.

What I do not understand/I am not sure I understand

• In CASE 2 why did we end up with the vendors bundle containing both the common code (jquery) and whatever remained from the vendors entry (some_jquery_plugin)? From my understanding, what the CommonsChunkPlugin did here was that it gathered the common code (jquery), and since we forced it to output it to the vendors bundle, it kind of "merged" the common code into the vendors bundle (which now only contained the code from some_jquery_plugin). Please confirm or explain.

• In CASE 3 I do not understand what happened when we passed { names : ['vendors', 'manifest'] } to the plugin. Why/how was the vendors bundle kept intact, containing both jquery and some_jquery_plugin, when jquery is clearly a common dependency, and why was the generated manifest.bundle.js file created the way it was created (requiring all other bundles and containing the runtime) ?