Как подключить в index.html part файлы(header, footer и т.п.) с помощью Webpack?

Question

[alexeeey_kuznetsov]

Мне необходимо в index.html который обрабатывается HTMLWebpackPlugin добавлять части html из других html файлов. Сборка у меня в связке с галп. Изначально, я собирал в index файл части с помощью gulp-file-include.
Но теперь необходимо, чтобы эти файлы добавлялись вебпаком.
Я попробовал html-loader, со след. структурой:
webpack.config.js

module: {
    rules: [
      { test: /\.(html)$/,
        include: path.join(__dirname, 'parts'),
        use: {
          loader: 'html-loader',
          options: {
            interpolate: true
          }
        }
      },
   ]
}

src/index.html

${require('html-loader!./parts/_header.html')}
<div class="container">
	<h1>Main Page</h1>
</div>
<script src="js/scripts.min.js"></script>
${require('html-loader!./parts/_footer.html')}

Но проблема в том, что на выходе получаю, сначала скомпилированный _header.html, затем, сразу _footer.html и только потом основной контент.
Т.е. есть ли возможность управлять последовательностью?
Второй вопрос, можно ли также передавать переменные в partial, например для уникального title страницы(в документации вроде есть что-то похожее), но с этим можно разобраться.
И есть может быть возможность запускать сначала gulp, а затем вебпак?

Изначальный файл src/index.html c partial из gulp

@@include('parts/_header.html', {
 	"title": "Main Page"
})
<div class="container">
	<h1>Main Page</h1>
</div>
<script src="js/scripts.min.js"></script>
@@include('parts/_footer.html')

Answer 1

[dark_king_13]

Может тебе лучше pug использовать. Он соберёт все части в один файл а потом просто прогони его через pug-loader

Comments

[alexeeey_kuznetsov]

Думал про это, но мне нужна только вставка партиалов в основной файл и передача параметров в эти партиалы. Может есть более элегантный способ сделать это. С pug не разбирался, но знаю про него, сейчас разбираться для такой проблемы как то не очень, но возможно придётся, если нет решения.