Как правильно передавать значения шаблону в Webpack 4?

Question

[Mike]

Приветствую!

Необходимо в Webpack 4 передать параметр в шаблон.

1. Нагуглил следующую реализацию: https://github.com/jantimon/html-webpack-plugin/bl...
2. Изменил сборку в соответствие с примером выше, в шаблоне параметр получил, все ок.

webpack.config.js:

new HtmlWebpackPlugin({
  template: 'src/page_landing_1.ejs',
  filename: "page_landing_1.html",
  templateParameters: {"prop": true},
}),

page_landing_1.ejs:

<% if(prop) { %>
<h1><%= prop %></h1>
<% } %>

Вопрос 1: насколько так правильно передавать параметры в шаблон? Какие есть реализации лучше?
Вопрос 2: если необходимо передавать динамические параметры? В данном случае, параметры передаются один раз при запуске сервера, чтобы параметры изменились, нужно перезапустить сервер...
Вопрос 3: при данной реализации, отваливается подключение других шаблонов (шапки и подвала) в текущий шаблон. Что делать?

Заюзал туториал https://ejs.co/ :
page_landing_1.ejs:

<%- include('header'); -%>
<% if(prop) { %>
<h1><%= prop %></h1>
<% } %>

Получил ошибку:

ERROR in ./src/page_landing_1.ejs (./node_modules/html-webpack-plugin/lib/loader.js!./src/page_landing_1.ejs)
    Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js):
    SyntaxError: missing ) after argument list

Comments

[be_a_man]

Можно использовать pug, там есть переменные прямо в шаблонах.

[Mike]

be_a_man, притащить целый препроцессор в сборку, чтобы решить вопрос переменных в шаблоне, ну такое...

[be_a_man]

Mike, ejs же притащили

[Mike]

be_a_man, изменил только расширение файла, синтаксис остался прежним, ничего другого не делал.

[be_a_man]

Mike, ну страдайте с перезапуском при изменении параметров дальше.

[Mike]

be_a_man, а еще варианты решения данной задачи есть?

[be_a_man]

Mike, когда мне это было нужно я не нашел другого варианта без перезагрузки.

Answer 1

[Mike]

Вопрос 3: при данной реализации, отваливается подключение других шаблонов (шапки и подвала) в текущий шаблон. Что делать?

Заюзать https://www.npmjs.com/package/ejs-webpack-loader .
webpack.config.js:

module: {
  rules: [
    {
      test: /\.ejs$/,
      use: [
        {
          loader: "ejs-webpack-loader",
          options: {
            data: {prop: true},
            htmlmin: true
          }
        }
      ]
    },
  ]
}

page_landing_1.ejs:

<%- include header.html -%>
<% if(prop) { %>
<h1><%= prop %></h1>
<% } %>