Как собирать модули относительно значения, переменной или конфига?

Question

[Ryzhakov]

В приложении использую react
У меня такая ситуация:
Есть одна точка входа - компонент Widget, внутри него может располагаться список разных компонентов, вот список этих компонентов хотелось бы указывать конфигом.
Например массивом [WidgetItem1, WidgetItem2], у другого [WidgetItem4, WidgetItem7] и тп.
На выходе нужно получить 6 js файлов под каждый виджет

Answer 1

[Антон Спирин]

Можно попробовать решить с помощью externals или DefinePlugin

UPD. Или еще более простой вариант в webpack.config:

resolve: {
  alias: {
    'WidgetItems': './src/js/common/widgetItems/SomeEnvWidgetItems' 
  }
}

Под одним и тем же алиасом у вас будут в разных конфигах разные файлы.

В SomeEnvWidgetItems:

export { default as SomeWdgetItem1 } from './SomeWdgetItem1';
export { default as SomeWdgetItem2 } from './SomeWdgetItem2';
/* ... */

В коде:
import * as widgetItems from 'WidgetItems';

Или, если на выходе удобней массив, в SomeEnvWidgetItems:

import { default as SomeWdgetItem1 } from './SomeWdgetItem1';
import { default as SomeWdgetItem2 } from './SomeWdgetItem2';
/* ... */

export default [
  SomeWdgetItem1,
  SomeWdgetItem2,
  /* ... */
];

В коде:
import widgetItemsList from 'WidgetItems';

Comments

[Ryzhakov]

Огромнейшее спасибо!

[Ryzhakov]

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

[Антон Спирин]

Ryzhakov, тут пришел в голову вариант попроще с использованием resolve alias:
в webpack.config

resolve: {
  alias: {
    'WidgetItems': './src/js/common/widgetItems/SomeEnvWidgetItems' 
  }
}

в SomeEnvWidgetItems:

import { default as SomeWdgetItem1 } from './SomeWdgetItem1';
import { default as SomeWdgetItem2 } from './SomeWdgetItem2';
/* ... */

export default [
  SomeWdgetItem1,
  SomeWdgetItem2,
  /* ... */
];

В коде:
import widgetItemsList from 'WidgetItems';

[Ryzhakov]

Антон Спирин, ООО это прям то что нужно, друг спасибо огроменное, пакуешь как батя