Javascript 使用webapack 4为每个条目创建vendor.bundle

我想使用webapack4为每个条目创建vendor.bundle。
例如

建筑之后

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'
        },
      }
    }
  },
}

我试图用一个函数而不是字符串来处理name，但它不起作用

谢谢。

解决了这个问题

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`
        },
      }
    }
  },
}

---

您当前的配置是什么？请把它贴在这里。谢谢。当前配置。我粘贴了当前配置。关键部分是

优化。splitChunks.cacheGroups[name]。chunks

。非常感谢你，花了很多时间来让它工作！

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`
        },
      }
    }
  },
}