Как динамически разделить по каталогам с помощью плагина Webpack / SplitChunks? - PullRequest
Новая
       55

Как динамически разделить по каталогам с помощью плагина Webpack / SplitChunks?

0 голосов
/ 21 января 2019

Я пытаюсь разделить код React (созданный с помощью create-реагировать-приложение) с помощью плагина splitChunks следующим образом:

У меня есть следующая структура компонентов (JSX):

  • сервисы
    • сервисA
      • КомпонентA1
      • КомпонентA2
      • подфолдер
        • Компонент A3
      • ...
    • serviceB
      • КомпонентB1
      • КомпонентB2
      • ...
    • serviceC
      • КомпонентB1
      • КомпонентB2
      • ...
    • ...

и я хочу получить следующий вывод (сборка):

  • static / js
    • serviceA
      • serviceA.bundle.chunkhash.js
    • serviceB
      • serviceB.bundle.chunkhash.js
    • serviceC
      • serviceC.bundle.chunkhash.js

(другие среды выполнения / сети находятся в корне / static / js)

Другое ограничение заключается в том, что компоненты загружаются динамически с помощью 

const Component = lazy(() => import(componentPath));
...
<Suspense fallback={..}>Component</suspense>

"componentPath" определяется на лету (когда пользователь нажимает на значок, он открывает данную службу).

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

static/js/serviceA/  ==> js served by Docker container running service A
static/js/serviceB/  ==> js served by Docker container running service B
static/js/serviceC/  ==> js served by Docker container running service C

До сих пор я пытался:

  • установить для output.chunkFilename значение [name] / [name]. [chunkhash] .js

  • использовать webpackChunkName с [имя] и [запрос]:

    • [имя] не работает (получил буквально буквально "[имя]" как часть моего имени каталога).

    • [запрос] выравнивает имя каталогов:

      serviceA-ComponentA1 serviceA-ComponentA2serviceA-subFolder-ComponentA3 serviceB-componentB1 serviceB-componentB2 ...

Затем я попытался использовать плагин splitChunks со следующими параметрами: 

  splitChunks: {
    chunks: 'all',
    name: function(module) {
      let serviceName = module.rawRequest ? module.rawRequest : 'default';
      serviceName = serviceName.replace('../', '').replace('./', '');
      serviceName = serviceName.split('/')[0];
      return serviceName;
    },
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      },
      serviceA: {
        test: /[\\/]serviceA[\\/]/,
        priority: -10
      },
      serviceB: {
        test: /[\\/]serviceB[\\/]/,
        priority: -10
      },
      serviceC: {
        test: /[\\/]serviceC[\\/]/,
        priority: -10
      },              
    }
  },

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

Так что вопрос: мой подход правильный?

...