Aetae

Естественно компилирует всё что нужно для реакта из node_modules.
А как иначе реакт работать то будет, без самого реакта?)

Ну ошибка жалуется на отсутствие python. Попробуй установить.

Однако подозреваю дело в версии Node, последняя LTS ток неделю как вышла и пакеты могут парить мозги.

И? Твой алгоритм абсолютно действенен.)

Vue-шаблоны полностью html-соместимы(в отличе от).
Кинул html в .vue.
Кинул css по папочкам - сделал import '/some.css';
Кинул картинки по папочкам - vue умный, сам их через webpack их подтянет.
И всё работает.)
А вот итеративность из js тебе придётся переписать vue-way. Если там какой jquery был или типа того - оно совсем не совместимо с парадигмой vue. Накостылять конечно можно, и довольно просто, но как - я тебе советовать не буду.)

Ну потому что старые браузеры не умеют в esmodules, а изначальная идея babel как раз в поддержке старых браузеров - всё остальное наслоилось после.
Также esm нельзя скомпоновать в один файл, в отличие от CommonJS.
В любом случае это лишь умолчания, которые вы всегда можете поменять.

Достаточно представлять себе принципы и возможности, углубляться стоит по мере необходимости, как и со всем остальным. В мире слишком много всего, досконально всё это знать невозможно(если вы не супермен).
По вебпаку у меня несколько написанных плагинов, пара лоадеров, хитро-закрученные конфиги entry-point'ов с шарингом chunk'ов и множество использованных малоизвестных фич за плечам. Знаю ли я webpack? Нет, я не знаю webpack, в нём ещё тонна чего я не каслся. Но документация вот она, сорцы вон они, надо будет - разберусь.

publicpath

Ну например устанавливать эту переменную с помощью webpack.DefinePlugin во время сборки.
Но в целом - нахрена вам две одинаковых сборки отличающихся одной переменной? Вынесите эту настройку в кофиг приложения и просто проставляйте нужную на нужной странице.

Прибьёт. Использовать следует разумно. В основном когда такие компоненты тянут приличные (по размеру относительно бандла) куски кода с собой, а вызываются редко.

Эти картинки отсутствуют на сервере, потому что никто их туда не кладёт. Сервер(webpack devserver) работает не от локальной папки, а от структурированного как описано в конфиге результата сборки. Сделайте build и посмотрите в папку dist: именно так и выглядит структура файлов на сервере.

Вы можете положить эту папку с картинками туда использовав copy-webpack-plugin. Если на сервер эта папка будет класться вручную и в прод. dist она вам не нужна - можете подключать этот плагин только для develpment.
Альтернативно вы можете настроить devserver (используя before/after), чтоб он просто отдавал файлы из этой папки по соответствующему запросу(читая их содержимое вручную средствам node fs).
Главное не забыть потом положить эту папку на сервер руками.

Напиши свой плагин, там ничего сложного:

class RandomPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync(this.constructor.name, (compilation, callback) => {
      const chunkList = [];
      for (const chunk of compilation.chunks) {
        // тут какая-нить фильтрация
        chunkList.push(...chunk.files);
      }
      // тут запись в файл или ещё что
      console.log(chunkList);
      callback();
    });
  }
}

Если не нужна поддержка IE11 и Safari - можно использовать web-компоненты и просто подключать стили внутри компонента - они инкапсулируются, иначе придётся покорячиться.

Как это сработает с vuetify не скажу, но в похожей ситуации я использовал postcss-prefix-selector, просто добавив с помощью него короткий класс-префикс для всех стилей либы. Соответственно этот класс назначаешь на контейнер с vue и, при удаче, всё заработает.)

Мне, увы, там ещё кастомный трансформ пришлось добавить для корневых (body, :root и т.п.) селекторов, попатчить саму либу местами и проследить чтобы теперь основные стили сайта не перебивали классы либы, но это уже отдельная история.)

P.S. Для работы postcss-prefix-selector с vue-cli не обязательно вручную вкорячивать loader, можно его просто добавить в .postcssrc.js в plugins:

require('postcss-prefix-selector')({
    prefix: '.prefix'
}),