Миграция Webpack 4 CommonsChunkPlugin

У меня есть два входных файла, и я хочу, чтобы только зависимости первого из них были включены в фрагмент поставщика. Зависимости второй записи должны оставаться в отдельном пакете.

Предполагая, что ваши точки входа main и secondary:

entry: {
    main: 'path-to/main.js',
    secondary: 'path-to/secondary.js'
}

Используя webpack-4, вы можете извлечь только vendors модули из main чанка, но оставьте другие сторонние модули, указанные в secondary внутри этого чанка, используя функцию test cacheGroups, которую вы хотите создать.

optimization: {
    splitChunks: {
        cacheGroups: {
            vendors: {
                name: 'vendors',
                chunks: 'all',
                reuseExistingChunk: true,
                priority: 1,
                enforce: true,
                test(module, chunks) {
                    const name = module.nameForCondition && module.nameForCondition();
                    return chunks.some(chunk => {
                        return chunk.name === 'main' && /[\\/]node_modules[\\/]/.test(name);
                    });
                }
            },
            secondary: {
                name: 'secondary',
                chunks: 'all',
                priority: 2,
                enforce: true,
                test(module, chunks) {
                    return chunks.some(chunk => chunk.name === 'secondary');
                }
            }
        }
    }
}

Мне потребовалось некоторое время, чтобы понять это, но ключевым моментом для меня стало то, что аргумент chunks в веб-пакете 4 теперь принимает функцию, которая позволяет вам включать только определенную запись. Я предполагаю, что это недавнее изменение, потому что на момент публикации его не было в официальной документации.

splitChunks: {
  cacheGroups: {
    vendor: {
      name: 'vendor',
      chunks: chunk => chunk.name == 'main',
      reuseExistingChunk: true,
      priority: 1,
      test: module =>
        /[\\/]node_modules[\\/]/.test(module.context),
      minChunks: 1,
      minSize: 0,
    },
  },
},

Обратите внимание, что я исправил проблему, изменив это в моем webpack.common.js:

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['vendor']
    })
    ]

К этому:

  optimization: {
      runtimeChunk: "single", // enable "runtime" chunk
      splitChunks: {
          cacheGroups: {
              vendor: {
                  test: /[\\/]node_modules[\\/]/,
                  name: "vendor",
                  chunks: "all"
              }
          }
      }
  },