Отдельные пакеты образуют динамически импортируемые модули узлов

Question

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

splitChunks: {
        name: true,
        cacheGroups: {
          default: false,
          vendors: false,
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: "vendors",
            chunks: "initial"
          },
          common: {
            test: /[\\/]node_modules[\\/]/,
            name: "common",
            minChunks: 2,
            chunks: "async",
            priority: 10,
            reuseExistingChunk: true,
            enforce: true
          }
        }
      },

Вопрос. Но есть некоторые модули узлов, которые я не хочу включать ни в один из пакетов. Ни два вышеупомянутых, ни основные связки, а должны быть созданы отдельно.

import('lodash') должен создать lodash.chunk.js.

import('underscore') должен создать файл underscore.chunk.js.

Можно мне подумал волшебный комментарий? /* webpackIgnore: true*/

Answer 1

Здесь ваш lodash будет добавлен в общий блок на основе текущей конфигурации splitchunks. Чтобы загрузить его как отдельный блок, измените конфигурацию splitchunks на

var vendorCheck = function vendorCheck(module) {
  var request = module.userRequest;
  // Specify the packages in the condition that need not be present in vendor chunk
  // Here I am excluding the package lodash from vendor chunk
  return request && request.indexOf('node_modules') >= 0 && request.indexOf('node_modules/lodash') === -1
};

var lodashCheck = function lodashCheck(module) {
  var request = module.userRequest;
  return request && request.indexOf('node_modules/lodash') >= 0
}

cacheGroups: {
    default: false,
    'lodash': {
      name: 'lodash',
      chunks: 'all',
      minChunks: 1,
      test: lodashCheck
    },
    vendor: {
      name: 'vendor',
      chunks: 'all',
      minChunks: 1,
      test: vendorCheck
    },
    common: {
        test: vendorCheck,
        name: "common",
        minChunks: 2,
        chunks: "async",
        priority: 10,
        reuseExistingChunk: true,
        enforce: true
    }
}