Я борюсь с тем, что похоже на общую ошибку Webpack после попытки оптимизировать мой исходный код.
Если у меня есть следующие файлы в ./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
Несмотря на то, что файлы сгенерированы, 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');
moduleA.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]])}`)
};
moduleB.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']),
]
};