Создайте vendor.bundle для каждой записи с помощью веб-пакета 4

Question

Я хочу создать vendor.bundle для каждой записи с webapack4.
пример.

src/
  pages/
    home/
     index.js
    list/
     index.js

После сборки.

dist/
  pages/
    home/
      index.bundle.js
      home.vendor.bundle.js
    list/
      index.bundle.js
      list.vendor.bundle.js

Как настроить разделенные чанки?
Текущая конфигурация.

const path = require('path')

module.exports = {
  mode: 'development',

  entry: {
    '/pages/home/index': path.resolve(__direname, 'src', 'pages', 'home', 'index.js'),
    '/pages/list/index': path.resolve(__direname, 'src', 'pages', 'list', 'index.js'),
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },

  // I am troubled with the setting here.
  optimization: {
    runtimeChunk: {
      name: 'runtime'
    },
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          chunks: 'all',
          enforce: true,
          name: 'vendor'
        },
      }
    }
  },
}

Я пытался обработать имя с помощью функции вместо строки, но это не сработало.

Спасибо.

Answer 1

Решил эту проблему.

const path = require('path')
module.exports = {
  mode: 'development',

  entry: {
    '/pages/home/index': path.resolve(__direname, 'src', 'pages', 'home', 'index.js'),
    '/pages/list/index': path.resolve(__direname, 'src', 'pages', 'list', 'index.js'),
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },

  optimization: {
    runtimeChunk: {
      name: 'runtime'
    },
    splitChunks: {
      cacheGroups: {
        'top-vendor': {
          test: /[\\/]node_modules[\\/]/,
          chunks: chunk => chunk.name === '/pages/home/index',
          enforce: true,
          name: `${path.dirname('/pages/home/index')}/vendor`
        },
        'list-vendor': {
          test: /[\\/]node_modules[\\/]/,
          chunks: chunk => chunk.name === '/pages/list/index',
          enforce: true,
          name: `${path.dirname('/pages/list/index')}/vendor`
        },
      }
    }
  },
}