Как правильно собирать 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']
            }
        ]
    }
}

То есть для каждого шаблона создаю отдельный инстанс. Это не удобно по ряду причин:

  1. HtmlWebpackPlugin компилирует мой шаблон. Соответственно, приходится вручную прописывать все переменные.
  2. В проекте больше десятка страниц. Соответственно, придется создавать больше 10 инстансов, что раздует конфиг.
  3. Директивы <%- include('...') %> не отрабатывают, хотя это можно решить плагином HtmlWebpackPartialsPlugin,
  4. Однако при при использовании HtmlWebpackPartialsPlugin, необходимо вручную прописывать связь каждого шаблона с фрагментом. К том же директива include все равно не будет работать, а только вставка через пользовательские теги.

Есть ли способ проще? То есть заставить include работать и не дублировать связь ejs-компонентов в конфиге вебпака?


Ответы (0 шт):