Template engine/preprocessor for layout in 2021?

Question

Web development

I understand that there are a million such questions, but I studied them all (Many) and did not come to a final conclusion.
Now I'm using EJS, but apparently it doesn't have much support and I haven't seen anyone using it (change my mind) + I'm not particularly comfortable using it with webpack, because for some reason the included template files don't want to to assemble when editing them (only the main file)
I like pug in terms of functionality, but I don’t particularly like the syntax.
nunjucks apparently does not want to work with webpack at all, or I'm doing something wrong, but as I understand it, this is tier 1 now.

In general, I want to hear from you a tier-1 template engine / preprocessor with the functionality of cycles, connecting modules and, in principle, everything that is in nunjucks and ejs and pug.

Answer 1

of the ones that are adequate for layout - pug and nunjucks
ejs and handlebarsjs - are too low-level, although they are probably faster.
React Vue Angular is about something else.
nunjucks should work fine with Webpack. Even for Vite there is a plugin, which I will try now.
Well, either use posthtml-include, but this is so-so a crutch.
Under webpack, PUG and pug-bem-plain-loader work fine, but webpack is somehow slow. Galp + Webpack for js is better, Vite is still fantastic, but there are not a lot of plugins.

Answer 2

I use Nunjucks, happy as an elephant. I connect, as in the example given here :

import Nunjucks from './nunjucks'; // Импортируем Nunjucks из нашего файла конфигурации (см. ниже)

{
  test: /\.njk$/,
  use: {
    loader: 'html-loader',
    options: {
      preprocessor: (content, loaderContext) => {
        let result;

        try {
            loaderContext.addContextDependency(loaderContext.context);
            loaderContext.addDependency(PATHS.njkConfig); // PATHS.njkConfig - путь к файлу конфигурации

            result = Nunjucks.renderString(content); // или `Nunjucks.render(loaderContext.resourcePath)`
          
        } catch (error) {
          loaderContext.emitError(error);

          return content;
        }

        return result;
      },
      minimize: false
    }
  }
}

nunjucks.js configuration file.

import Nunjucks from 'nunjucks';

// PATHS.pages - путь к папке с файлами Nunjucks
const env = Nunjucks.configure(PATHS.pages, {
  noCache: true
});

// Тут можно задавать всякие фильтры и глобальные переменные, например:
// const isArray = value => Array.isArray(value);
// env.addFilter('isArray', isArray);
// env.addGlobal('projectName', 'mySuperProject');

export default Nunjucks;

Answer 3

https://svelte.dev/
https://handlebarsjs.com/

Answer 4

nunjucks + gulp
why do you need webpack in layout ? - well, if you are doing SPA or the like on React / Vue, etc., then yes, but then why do you need template engines? because there are cockroaches ala jsx.