Webpack - отдельно footer и header

@targon_kp · Регистрация: 03.09.2021

Студворк — интернет-сервис помощи студентам

Вопрос - как отдельно подключить "куски" footer и header?
Вписываю таким образом <%= require('html-loader!./footer.html').default %>
По идее html-loader должен обрабатывать это и вставлять кусок из файла.
Отмечу, что footer.html находится на одном уровне с index.html (если вдруг пути неправильные).
Но почему-то обработки нет, и этот кусок добавляется просто как текст <%= require('html-loader!./footer.html').default %>.

@andrey_f · 13.05.2025, 11:01

Сообщение от targon_kp

<%= require('html-loader!./footer.html').default %>

Это не будет автоматически интерпретироваться как JavaScript. Вам нужно вставлять такие конструкции внутри скриптов, а не прямо в HTML.

@targon_kp · 13.05.2025, 11:33 **[ТС]**

Сообщение от andrey_f

Это не будет автоматически интерпретироваться как JavaScript. Вам нужно вставлять такие конструкции внутри скриптов, а не прямо в HTML.

Нет, такие конструкции предназначены для HTML. Как оказалось - здесь нужно использовать postprocessor в самом html-loader.

Добавлено через 7 минут
Или использовать другой loader, например, ejs-loader.

@andrey_f · 13.05.2025, 11:52

в Webpack конфигурации у вас настроен html-loader? покажите конфиг.

@targon_kp · 13.05.2025, 15:33 **[ТС]**

Сообщение от andrey_f

в Webpack конфигурации у вас настроен html-loader? покажите конфиг.

Здесь нашел пример
https://github.com/webpack-con... tprocessor

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          postprocessor: (content, loaderContext) => {
            // When you environment supports template literals (using browserslist or options) we will generate code using them
            const isTemplateLiteralSupported = content[0] === "`";
 
            return content
              .replace(/<%=/g, isTemplateLiteralSupported ? `\${` : '" +')
              .replace(/%>/g, isTemplateLiteralSupported ? "}" : '+ "');
          },
        },
      },
    ],

Добавлено через 3 минуты
То есть, если использовать этот postprocessor, то можно продолжать применять html-loader и конструкция типа <%= ... %> для включения других фрагментов html норм обрабатывается. В противном случае, html-loader не обрабатывает данный синтаксис (раньше вроде он обрабатывал - интерполяция) и требует на выходе чистый HTML.

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

@targon_kp 7 / 7 / 1 Регистрация: 03.09.2021 Сообщений: 271

	Webpack - отдельно footer и header 12.05.2025, 18:44. Показов 2013. Ответов 4 Метки нет (Все метки) Вопрос - как отдельно подключить "куски" footer и header? Вписываю таким образом <%= require('html-loader!./footer.html').default %> По идее html-loader должен обрабатывать это и вставлять кусок из файла. Отмечу, что footer.html находится на одном уровне с index.html (если вдруг пути неправильные). Но почему-то обработки нет, и этот кусок добавляется просто как текст <%= require('html-loader!./footer.html').default %>. 0

@andrey_f 883 / 536 / 228 Регистрация: 21.02.2011 Сообщений: 5,706
	13.05.2025, 11:52
	в Webpack конфигурации у вас настроен html-loader? покажите конфиг. 0