Webpack:主输出中未导入供应商bundle

Question

在尝试优化我的源代码后，我正在努力解决Webpack中的一个常见错误。

假设我在./src:中有以下文件

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

strong>我的期望是，如果我试图优化我的捆绑包(见下文(，它将输出两个文件：

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

虽然生成了文件，但index.js似乎不会导入供应商~main.index.js。然而，当删除优化(和供应商javascript(时，它执行得很好

这是正确的假设吗？我怎样才能让它这样工作

虽然这是Node的捆绑包，但我想要导出供应商文件是有正当理由的。

附带的git回购可在此处复制：

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

文件为：

main.js

const  moduleA  = require('./moduleA');
moduleA.log('log from main.js');

---

模块A.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]])}`)
};

---

模块B.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]])}`)
};

---

webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
module: {
rules: [{
include: [path.resolve(__dirname, 'src')],
loader: 'babel-loader',
options: {
plugins: ['syntax-dynamic-import'],
presets: [['env', {
'modules': 'commonjs'
}]]
},
test: /.js$/
}]
},
entry: './src/main',
target: 'node',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
priority: -10,
test: /[\/]node_modules[\/]/,
enforce: true
},
},
// concatenateModules: false,
chunks: 'all',
minChunks: 1,
minSize: 0,
name: true
}
},
plugins: [
new CleanWebpackPlugin(['dist']),
]
};

Answer 1

事实证明，这还没有在浏览器之外的Webpack中实现。

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

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

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

Answer 2

在定义chunks: 'all',时，显式地获取所有初始条目和异步导入(默认情况下仅为按需异步块(，并指定bundler从中创建新的供应商块/文件。

因此，行为正如预期的那样。这个想法是从入口文件中删除常见的依赖项，这样它们就可以共享，并且页面总体上必须加载更少的供应商/常见代码。

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