Pipop

Стоило сначала выспаться.

Выше пример правильно генерирует спрайт, остальные файлы в корне dist — следствие неправильной конфигурации изображений. Решено так:

{
    test: /\.(png|jpg|svg|webp|gif)$/,
    use: [
                {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/'
                  }
              }
          ]
}

https://codepen.io/GunAlv/pen/VweNGaJ
Добавьте
transform-box: fill-box;
transform-origin: center;

Решено: при нечетном кол-ве слайдов необходимы опции:
slidesPerGroup: 2,
slidesPerView: 'auto'

При это слайдам установить ширину в 50%, а последнему слайду — 100%

Решено запретом флекс-контейнерам сжиматься. По какой-то причине на мобилке браузеры со рвением, достойным лучшего применения, сжимали все контейнеры, точно пытались по-максимум вместить контент во вьюпорт. В main-menu__ul и main-menu__top добавлены flex-shrink: 0;

Помог Артем Будин и вот тут: https://stackoverflow.com/questions/6483425/preven...

Нужно задать body минимальную ширину. Если верстка фиксированная - такая ширина равна ширине центровщика

Решил так:
Установил все перечисленные в package.json модули через —save-dev ещё раз. На всякий случай ещё раз глобально установил gulp. Заработало