Рано или поздно каждый разработчик должен сделать выбор:
1) codepen.io
2) jsfiddle.net
Ответов будет гораздо больше. А так я Ваш код вставил - у меня ни стрелок, ничего. Как результат, даже время тратить не хочется.

Есть видео, где много времени уделяется оптимизации: www.youtube.com/watch?v=ri2XWgIt59U&index=12&list=WL
В частности описывается Ваш принцип: Т.е. есть минимальный css, который загружается сразу в head и он содержит все основные селекторы для отображения контента. Все остальные файлы с css подгружаются в js, когда документ уже загружен (т.е. через событие onload)

Если же важен именно код подгрузки на Js, то twobomb выше описал вполне рабочий вариант

Что-то все в определение полезли. Сетка это чтобы и дизайнер и верстальщик не поубивали друг друга.
В сетке 12 колонок, потому что так изначально было в популярной библиотеке, которой все пользовались: getbootstrap.com/css

Фактически сетка появляется так: Верстальщик говорит, что у него страница сайта разбита на 12 одинаковых частей, и дизайнер может рисовать все что угодно, но это "что угодно", должно соответствовать размерам этих частей, может занимать 3 части, может 4 части, но никак не 3,5 части! Иначе верстальщик будет очень сильно напрягаться, реализовывая это.

Вот пример сетки: Она уже готова и автор показывает ее возможности: flexboxgrid.com

От себя добавлю, что второй файл не создается. Сейчас стоит прописывать ему filename

new HTMLWebpackPlugin({
      filename: 'index.html',
      template: './index.html'
    }),
new HTMLWebpackPlugin({
      filename: 'second.html',
      template: './second.html'
    })

Посмотрите это видео: https://www.youtube.com/watch?v=DYewDyixMH8&index=...
регулярные выражения станут для вас проще простого. Там же будет показан сайт, на котором собраны шаблоны регулярных выражений