Как правильно разделить чанк в webpack4?

Question

У меня есть три файла: index.js, foo.js и bar.js. Ниже приводится их содержание:

/** index.js */
import foo from './foo'
import bar from './bar'
// ...
/** foo.js */
export default function foo () {/* some code */}
// ....
/** bar.js */
import lodash from 'lodash'
export default function bar () {/* some code using lodash */}

Моя цель - получить выходные данные, используя этот пакет:

main.89sfds.js // the entry
runtime~main.dfsdf78.js // webpack runtime
vendors~main.90fsd0fs.js // lodash
foo.dfjiusdf.js // bundle foo module
bar.89sdfsdfs.js // bundle bar module

Поэтому я пытаюсь использовать этот файл конфигурации:

module.exports = {
  optimization: {
    runtimeChunk: true,
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        foo: {
          test: path.resolve('src/foo.js'),
          name: 'foo',
          enforced: true
        },
        bar: {
          test: path.resolve('src/bar.js'),
          name: 'bar',
          enforced: true
        }
      }
    }
  }
}

Однако вывод будет:

main.4f34rwf.js // the entry
runtime~main.sf24fds.js // webpack runtime
foo.sf4df3e.js // bundle foo module
bar.4389sfd.js // bundle bar module

Как видите, отсутствует vendor (который включен в main. js сейчас)

Похоже, я просто пытаюсь В комплекте один модуль, foo.js или bar.js, появляется vendor.

Так как же получить правильный вывод?

Answer 1

Я понял это. Довольно простая причина.

Просто установите optimization.splitChunks.maxInitialRequests на большее значение, которое по умолчанию равно 4.