Правка страницы в Vite

Правка страницы меняет html перед отдачей одним хуком.

Заголовок вкладки и разметка лежат в index.html. Плагин может заменить фрагмент html уже после чтения файла, но до ответа браузеру. Модуль при этом может выводить своё слово отдельно от заголовка. Исходная страница будет такой:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>hello</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

В модуле оставим другое слово для тела страницы:

document.querySelector('#app').textContent = 'hello';

В массив plugins добавим объект с хуком transformIndexHtml. Он заменит hello в html на vite:

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      name: 'html-title',
      transformIndexHtml(html) {
        return html.replaceAll('hello', 'vite')
      },
    },
  ],
})

Выполним перезапуск сервера разработки и откроем страницу. Вкладка покажет vite, а блок app по-прежнему получит hello из модуля, потому что хук не меняет JavaScript. После сборки тот же хук попадёт в dist/index.html с той же подстановкой.

Поставьте в title слово ready, настройте хук так, чтобы во вкладке было done, и сравните исходный index.html с тем, что видит браузер.

Добавьте в body комментарий с текстом ready и проверьте, что хук меняет и заголовок, и комментарий, если замена идёт по всему html.