Есть ли способ использовать splitChunksPlugin в Webpack 4 для ручного управления тем, какие модули помещаются в какие выходные пакеты?

Question

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

Следующая конфигурация неверна, но я думаю, что она лучше всего проиллюстрирует то, что я пытаюсь выполнить.Я прочитал все документы, но не могу найти ничего подобного.

optimization: {
  splitChunks: {
    react: {
      test: /node_modules\/react/
    },
    vendor: {
      test: /node_modules\/(?!react)/
    },
    svgIcons: {
      test: /src\/js\/components\/icons/
    },
  }
}

Предполагается, что мы получим следующие 4 пакета:

react.bundle.js - Contains all react-related dependencies
vendor.bundle.js - Contains all other vendor files from node modules
svgIcons.bundle.js - Contains a group of app component files that match my test
bundle.js - The default bundle containing everything else.

Есть ли способ сделать это?

Answer 1

После еще нескольких раскопок я в конце концов понял это.По сути, это то, что вам нужно:

Прежде всего, в объекте output ...

output: {
  filename: "[name].js"
}

Вам нужна переменная [name], иначе ваши пакеты не будут выбраныдо правильных имен.

Далее, в объекте optimization ...

optimization: {
  splitChunks: {
    cacheGroups: {
      react: {
        chunks: 'initial',
        name: 'react',
        test: /node_modules\/react/,
        enforce: true,
      },
      vendor: {
        chunks: 'initial',
        name: 'vendor',
        test: /node_modules\/(?!react)/,
        enforce: true,
      },
      icons: {
        chunks: 'initial',
        name: 'icons',
        test: /src\/js\/components\/icons/,
        enforce: true,
      },
    },
  },
},

В результате получаются следующие пакеты:

react.js
vendor.js
icons.js
bundle.js