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

В Webpack можно создавать несколько HTML-страниц из EJS-шаблонов с помощью плагина html-webpack-plugin. Этот плагин позволяет генерировать HTML-файлы на основе заданных шаблонов и автоматически встраивать в них скрипты и стили, сгенерированные Webpack.

Для начала, установите плагин html-webpack-plugin в ваш проект:

npm install --save-dev html-webpack-plugin

Далее, отредактируйте ваш конфигурационный файл Webpack (обычно это webpack.config.js) следующим образом:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  // ...другие настройки Webpack...
  plugins: [
    new HtmlWebpackPlugin({
      template: './path/to/template.ejs',
      filename: 'index.html',
      chunks: ['main'] // имена чанков, которые нужно встроить в данный HTML-файл
    }),
    new HtmlWebpackPlugin({
      template: './path/to/another-template.ejs',
      filename: 'another-page.html',
      chunks: ['another'] // имена чанков для другой страницы
    }),
    // ...другие экземпляры HtmlWebpackPlugin для других страниц...
  ]
};

В примере выше мы использовали два экземпляра HtmlWebpackPlugin для генерации двух HTML-страниц: index.html и another-page.html. У каждого экземпляра плагина мы указали путь к соответствующему EJS-шаблону (template) и путь для сохранения сгенерированного HTML-файла (filename). Кроме того, мы указали, какие чанки (chunks) нужно встроить в каждый HTML-файл.

chunks - массив имен чанков, которые нужно встроить в данный HTML-файл. Чанки - это группы сгенерированных JavaScript-файлов, которые можно настроить с помощью конфигурации Webpack. Каждый чанк может содержать отдельную функциональность вашего приложения. Например, в нашем примере main и another - это имена чанков, которые мы создали в нашей конфигурации.

Теперь, когда вы запустите сборку с помощью Webpack, html-webpack-plugin автоматически создаст и встроит скрипты и стили из чанков в каждую HTML-страницу, как указано в конфигурации.