Webpack：供应商捆绑包未导入到主输出中

Question

在尝试优化我的源代码后，我正在努力解决Webpack出现的一般错误。

假设我在public int getNumDots() { int numDots = 0; for (String row: list) { for (int i = 0; i < row.length(); i++) { if (charAt(i) == '.') { numDots++; } } } return numDots; } 中有以下文件

./src:

├── main.js
├── moduleA.js
└── moduleB.js

我的期望是，如果我尝试优化我的捆绑包（见下文），它将输出两个文件：

main.js imports and uses ModuleA.

moduleA.js imports and uses ModuleB

ModuleA.js and ModuleB.js both import flatten-array from node_modules

尝试执行1. index.js 2. vendors~main.index.js 输出捆绑包会导致：

index.js

尽管已生成文件，但是/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); ^ TypeError: Cannot read property 'call' of undefined 似乎未导入vendor〜main.index.js。但是，在删除优化（和供应商的javascript）时，它执行得很好

这是正确的假设吗？如何使它像这样工作？

尽管这是Node的捆绑包，但出于充分的原因，我想导出供应商文件。

与git repo一起复制以在此处可用：

https://github.com/supasympa/webpack-vendors-issue

文件为：

main.js

index.js

---

moduleA.js

const  moduleA  = require('./moduleA');

moduleA.log('log from main.js');

---

moduleB.js

const moduleB = require('./moduleB');
const flatten = require('array-flatten');

module.exports.log = function(msg){
    moduleB.log('logging from moduleA.js');
    console.log(`ModuleA logging: ${msg}`);
    console.log(`flattened: ${flatten([[1,2,3],[4,5],[6,7]])}`)
};

---

webpack.config.js

const flatten = require('array-flatten');

module.exports.log = function(msg){
    console.log(`ModuleB logging: ${msg}`);
    console.log(`flattened: ${flatten([[1,2,3],[4,5],[6,7]])}`)
};

Answer 1

定义chunks: 'all',，您将明确获取所有初始条目和异步导入（默认情况下，仅导入按需异步块），并指定捆绑程序以从中创建新的供应商块/文件。

>

因此行为符合预期。这样做的目的是从条目文件中删除常见的依赖项，以便可以共享它们，并且页面必须从整体上加载更少的供应商/通用代码。

显式控制条目文件包括的一种方法是以下模式：https://github.com/webpack/webpack/tree/master/examples/two-explicit-vendor-chunks

Answer 2

事实证明，这尚未在Webpack的浏览器外部实现。

https://github.com/webpack/webpack/issues/8330

https://github.com/webpack/webpack/issues/8161

https://github.com/webpack/webpack/issues/8156