Как правильно собирать html-статику в Webpack?
Я изучаю Webpack 5 и не могу понять, как мне лучше работать со сборкой html-статики из ejs-файлов. Для примера, у меня есть шаблоны страниц и вынесенные из них общие фрагменты (header, footer):
ejs/
L shared/
L header.ejs
L footer.ejs
L index.ejs
L 404.ejs
L contact.ejs
Соответственно, в каждом шаблоне проставлены ссылки на общие фрагменты:
<%- include('./shared/header.ejs') %>
Нужно, чтобы после сборки получились файлы, в которые добавлены эти фрагменты:
static/
L index.html
L 404.html
L contact.html
Я пытаюсь работать с такой конфигурацией:
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
context: path.resolve(__dirname, 'source'),
entry: './js/main.js',
output: {
filename: 'bind.js',
path: path.resolve(__dirname, 'public'),
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'style.css'
}),
new HtmlWebpackPlugin({
template: './ejs/index.ejs',
filename: '../public/index.html',
minify: false,
templateParameters: {
title: '<%= title %>'
}
}),
new HtmlWebpackPlugin({
template: './ejs/404.ejs',
filename: '../public/404.html',
minify: false,
templateParameters: {
title: '<%= title %>'
}
})
],
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
}
}
То есть для каждого шаблона создаю отдельный инстанс. Это не удобно по ряду причин:
- HtmlWebpackPlugin компилирует мой шаблон. Соответственно, приходится вручную прописывать все переменные.
- В проекте больше десятка страниц. Соответственно, придется создавать больше 10 инстансов, что раздует конфиг.
- Директивы <%- include('...') %> не отрабатывают, хотя это можно решить плагином HtmlWebpackPartialsPlugin,
- Однако при при использовании HtmlWebpackPartialsPlugin, необходимо вручную прописывать связь каждого шаблона с фрагментом. К том же директива include все равно не будет работать, а только вставка через пользовательские теги.
Есть ли способ проще? То есть заставить include работать и не дублировать связь ejs-компонентов в конфиге вебпака?