Как импортировать все из папки?

В Webpack есть несколько способов импортирования всех файлов из папки. Давайте рассмотрим их подробно.

1. Использование require.context:

Метод require.context позволяет импортировать все модули из указанной папки с помощью своего специфичного API.

Пример использования:

const modules = require.context('./путь_к_папке', true, /.js$/);
modules.keys().forEach(modulePath => {
  const module = modules(modulePath);
  // Далее можно использовать импортированный модуль
});

В этом примере мы импортируем все модули из папки "./путь_к_папке", сопоставляющие шаблон /.js$/. Затем мы проходимся по всем модулям и можем использовать их по необходимости.

2. Использование require.context с комментарием для Webpack:

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

Пример использования:

const modules = require('./путь_к_папке/*.js');
console.log(modules);

В этом примере мы используем комментарий /*.js для сопоставления всех модулей, оканчивающихся на .js в папке "./путь_к_папке". Затем импортируемые модули будут содержаться в переменной modules.

3. Использование glob:

Global Object (glob) - это пакет npm, который позволяет находить файлы с помощью шаблонов.

Пример использования:

const glob = require('glob');
const path = require('path');

glob.sync('./путь_к_папке/*.js').forEach(file => {
  const modulePath = path.resolve(file);
  const module = require(modulePath);
  // Далее можно использовать импортированный модуль
});

В этом примере мы используем glob.sync для нахождения всех файлов, соответствующих шаблону "./путь_к_папке/*.js". Затем мы проходимся по каждому из найденных файлов, резолвим его путь и импортируем модуль.

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