Mikhail Derkach

Когда у вас большой конфиг, логичнее все сторонние опции держать отдельно.
Если же вам не подходит, то обращайтесь к документации. И прямо там, если полистать ниже, вы увидите такой пример:

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: {
              "postcss-import": {},
              "postcss-short": { prefix: "x" },
            },
          },
        },
      },
    ],
  },
};

А так же, там есть пометки, что данный подход deprecated, и когда-нибудь вам придется переписать это в отдельный конфиг. Так почему не сделать это сразу?)

Теоретически работает аналогично вашему коду, работоспособность не проверял, ибо все плохо

const BI = document.querySelectorAll('.BlockItems');
const b = document.querySelectorAll('.b');

const style1 = "background-color: white;"
const style2 = "animation: op100 ease 2s;"

let counter = 0;
const callback = (item, style) => item.setAttribute("style", style);

function clean() {
  BI.forEach(item => callback(item, style2));  
  b.forEach(item => callback(item, style1));  
}

function RS() {
  counter >= BI.length - 1 ? 0 : counter += 1;
  
  callback(BI[counter], `${style1}; display: none;`);
  b[i].removeAttribute("style");
}

b.forEach((item, index) => {
  item.addEventListener("click", () => {
    counter = index;
    callback(BI[index], style2);
    callback(b[index], style1)
  })
})

1) зачем на каждой итерации переопределять стили, тем более инлайнить их? classList.add()/.remove()/.toggle() ваш друг, раздавайте стили и сравнивайте с индексом итерации
2) если вы обрабатываете каждый элемент, используйте forEach
3) если вам нужно событие клика - устанавливайте прослушку, а не назначайте атрибутами
4) если нужно слайдить влево/вправо, сделайте одну функцию, которая будет прибавлять/убавлять значение и обрабатывать слайды по индексу

в целом очень сложно понять вашу мысль, тем более зачем и для чего вы это делаете.
если нужно тренироваться - порешайте задачи на codewars, freecodecamp и т.д.

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

Возможно, если вы отдаете изображения из БД, то стоит заменить путь к изображению на base64.

В общем, с такой проблемой как у вас сталкивались многие и решить "в лоб" не получится :)

0) Включаю музыку, проверяю обновления пакетов и npm =)
1) Клонирую из собственного форка немного переделанный OptimizedHTML
2) Визуальный анализ макета, загрузка в AdobeAssets/Avocode
3) Составление типографики, подключение шрифтов
4) Экспорт графики "как есть", дергаю дизайнера перед сдачей, если необходимо. В целом, оптимизирую графику сам, но ближе к концу
5) Набрасываю первоначальный html, когда готов - работаю над стилями.
6) После подготовки десктопа, работаю над адаптивом. Как правило, много времени не занимает, если сам не сделаю говнокод, благо, sass спасает =)
7) Оптимизирую графику, если необходимо. Прогоняю GooglePageSpeed на своем тестхосте и на github pages
8) По результатам прогона оптимизирую все остальное (крайне редко)

Иногда приходится выполнять и другие действия, но в целом моя работа выглядит примерно так

P.S. Инструменты:
Редакторы: Brackets, SublimeText3. Очень редко Atom (смотрю в сторону VS Code)
Консоль: cmder
Макеты: PSD, sketch через invision.com
Сборщик: Gulp
Методология: БЭМ
Хостинг: GithubPages, собственный хост на hostland

Проблема решена следующим:
1) Подключаем в саму форму через интерфейс CF7 скрипт

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
var onloadCallback = function() {
            grecaptcha.render('recaptcha', {
            'sitekey' : 'key'
            });
        };</script>

2) Ставим капчу в нужное место
3) В срипт вызова fancybox добавляем:

onComplete: function(){
                //настройки формы cf7, если необходимо
                var widgetId = grecaptcha.render('conatiner_id');
		grecaptcha.reset(widgetId);
            },

UPD.
В таком варианте в фенсибоксе после закрытия капча выходила с ошибкой "reCAPTCHA has already been rendered in this element"
Применимо к фенсибоксу, решается следующим образом:
1) Убираем скрипт подключения капчи, создаем в форме обертку, например: <div class="captcha_wrapper"></div>
2) Приводим скрипт фенсибокса к примерно такому виду (подтягиваем капчу отсюда же):

$.fancybox({
   $.getScript("https://www.google.com/recaptcha/api.js");
   onComplete: function(){
     $(".captcha_wrapper").append("<div class='g-recaptcha' id='recaptcha' data-sitekey='your_key'></div>");
        var widgetId = grecaptcha.render('recaptcha');
      },
    onCleanup: function(){
      $('#recaptcha').remove();
      }
});

grecaptcha.reset мне не помогало, поэтому использовал .remove();