Как в Webpack создать несколько html-страниц из ejs-шаблонов?

Question

[romaro]

Разбираюсь с webpack и не могу понять, какой плагин (плагины) лучше использовать для генерации html-статики из ejs-шаблонов. У меня есть в проекте:

ejs/
L shared/
  L header.ejs
  L footer.ejs
L index.ejs
L 404.ejs
L contact.ejs

Мне нужно одним запуском вебпака собрать:

static/
L index.html
L 404.html
L contact.html

Во всех примерах, которые я нашел, ведется работа только с одним файлом. Как скормить вебпаку всю директорию ejs или хотя бы перечень нужных страниц в ней? Например, подключить их через main.js по аналогии с тем, как это делается для сборки sass из отдельных файлов:

import './ejs/index.ejs';
import './ejs/404.ejs';
import './ejs/contact.ejs';

Не хочется ради одной задачи добавлять к проекту Gulp.

Answer 1

[Sun_Day]

Что-то такое, мб что-то нужно дописать/поправить.
HtmlWebpackPlugin

import './ejs/index.ejs';
import './ejs/404.ejs';
import './ejs/contact.ejs';

const htmls = ["index", "404", "contact"].map(template => {
            new HtmlWebpackPlugin({
                template: `./static/${template}.html`,
                filename: `${template}.html`,
                chunks: [`${template}`]
            })
        };
        module.exports = {
            entry: {
                index: './ejs/index.ejs',
                404: './ejs/404.ejs',
                contact:  '. / ejs / contact.ejs'.
            },
            plugins: [htmls]
        };

Comments

[romaro]

В общем виде это работает, но мне так и не удалось заставить выполняться директивы вроде <%- include('./shared/header.ejs') %>. Есть Html-webpack-partials-plugin, но он требует вручную прописывать зависимости для каждого шареда.

Кроме того, HtmlWebpackPlugin компилирует ejs и поэтому тоже требует, чтобы каждая переменная из шаблона была объявлена для инстанса (опять же лишняя в моем случае ручная работа).

Мне нужно только собрать и минифицировать шаблон, без компиляции.

Как обычно решается такая задача?

[Sun_Day]

Не уверен, что есть какие-то элегантные пути решения. Не видел таких плагинов, возможно они мало известные.
Для переменных можно делать примерно вот так

В общем виде это работает, но мне так и не удалось заставить выполняться директивы вроде <%- include('./shared/header.ejs') %>.

By default (if you don't specify any loader in any way) a fallback ejs loader kicks in. Please note that this loader does not support the full ejs syntax as it is based on lodash template.

По дефолту включается резервный загрузчик на темплейтах из лодаша.

Нужно подключить нормальный ejs-loader в штмл плагин.

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: '!!ejs-compiled-loader!index.ejs',    
   })
  ]
}