Блог

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

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

 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.
  

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

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

Прежде всего, в 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