alvvi

Если это SPA, все элементы нужно писать в React,
кроме
<div class="root"></div>
куда рендерится приложение.
Нет никакого смысла писать их в .html, ни с точки зрения производительности, ни с точки зрения логики.

Если совсем нативное, то можно попробовать какие-нибудь плагины для gulp'a, типа gulp-file-include, gulp-html-extend и т.д.
Если же смотреть из шаблонизаторов, то советую Pug
(бывший Jade): широко распространен, используется по умолчанию в Express, умеет все, что должны уметь шаблонизаторы.

Стоит ли их использовать? Или писать на flex+css-grid?

CSS Grid пока мало где поддерживается, если хотитие пишите на нем с фоллбэками на flex, пост на хабре про это
Использовать сетку однозначно стоит, но мешать с CSS Grid - такое себе, не советую.

Так что именно не понятно?
Эта статья, по-моему, дает более чем достаточное объяснение, главное не запутаться в старом и новом API.

var listItems = document.querySelectorAll('ul li');
var liColor = 4;
for(var i = 0; i <= liColor; i++) {
  listItems[i].style.background = "purple";
}

Для production оно должно минифицироваться, все эти шапки там будут неотличимы от обычного кода.

Вытаскивать чистый JS не имеет смысла, вы потеряете одно из главных приемуществ Webpack'a - модульность.

tempDragon.forEach((x, i) => {
  if(x == 0) {
    revDragon[i] = 1;
  } else {
    revDragon[i] = 0;
  }
});

Возможно, цвет заливки указан в аттрибуте style, а его перебить можно только стилями с !important.

В иделае заливки должны быть прописаны в специальных SVG-аттрибутах, в некоторых графических редакторах такую опцию можно выставить в настройках экспорта. Так же у SVGO есть плагин "convertStyleToAttrs", который позволяет конвертировать аттрибут style в SVG-аттрибуты, при наличии готовых иконок советую воспользваться именно им. SVG-аттрибуты полезны тем, что имеют меньший приоритет, чем CSS-селектор, поэтому их возможно легко переопределить в стилях.

Чтобы было чуток нагляднее:
https://jsfiddle.net/0so00j9z/3/
у обоих есть класс blue, но у первого style перебивает стили класса.

Был такой же баг, если честно, до причины так и не докопался, но в issue на гитхабе есть хотфикс:

devServer: {
    host: 'localhost',
    port: 3000,
    contentBase: './dist',
    hot: true,
    open: true,
    openPage: '', // <== Добавить вот это
  },

Есть, к слову, хорошая статья на эту тему, может кому-то пригодится: клик

Скорее всего в User структура должна быть такой же

"config" : {
  "always-semicolon": true,
  // ...
}

Но вообще на сайте написано

Copy the config from here ↓ and save it as .csscomb.json in your project's dir:

То есть сохранять конфиг нужно в отдельном файле в папке проекта. (Что вполне логично: конфиг для разных проектов может значительно отличаться). User же, скорее всего, просто перезапишет default.