@alexeeey_kuznetsov

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

Мне необходимо в 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')
  • Вопрос задан
  • 39 просмотров
Пригласить эксперта
Ответы на вопрос 1
@dark_king_13
Может тебе лучше pug использовать. Он соберёт все части в один файл а потом просто прогони его через pug-loader
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы