HOWTO управлять пакетами webpack4

Question

То, что кажется простым, мне не подходит... Я пытаюсь создать три отдельных пакета:

(1) node-vendors- [hash].bundle.js: комплект материалов из node_modules (2) vendor-config-[hash].bundle.js: комплект всех сценариев, предоставленных поставщиками, мы используем наш сайт вместе с конфигурационными материалами... подумайте о нескольких сервисах, таких как Google Analytics; каждый поставщик, которого мы используем на нашем сайте, предоставляет фрагмент с данными учетной записи (3) наш собственный скрипт

Независимо от конфигурации, я продолжаю получать пакет для каждого исходного файла в категории #2 выше.

const coreVendorSetupFiles = {
  vendor1: './scripts/vendors/vendor1/index.js',
  vendor2: './scripts/vendors/vendor2/index.js',
  vendor3: './scripts/vendors/vendor3/index.js',
  vendor4: './scripts/vendors/vendor4/index.js',
  ourCode: './scripts/ours/index.ts
};

module.exports = {
  entry: coreVendorSetupFiles,
  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendorConfig: {
          test: /[\\/]vendors[\\/]/,
          name: 'vendor-config'
        }
      }
    }
  },
  output: {
    path: path.resolve(__dirname, './../dist'),
    filename: '[name].bundle-[hash].js'
  }
};

Каждый раз я получаю 6 пакетов... один для № 1 и № 3 выше, но по 4 дополнительных для каждого сценария, указанного в папке "vendors". Я знаю мой optimization раздел неверен, но что бы я ни изменил, я не могу заставить это работать. После поиска и проб тонны примеров, в отчаянии публикуя:/

Answer 1

Вы не можете настроить чанки через точки входа. Точки входа используются, чтобы избежать дублирования нагрузки. Там, кажется, у вас есть только одна точка входа:./scripts/ours/index.ts

Чтобы разделить vendors.js, используйте cacheGroups, здесь у вас будет столько кусков, сколько у вас есть npm-пакетов.

 cacheGroups: {
   vendor: {
     test: /[\\/]node_modules[\\/]/,
     vendorname(v) {
       var name = v.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
       return `npm.${name.replace('@', '_')}`;
     },
   },