Как разработать HTML-компоненты с использованием vanilaJS и webpack?

Для разработки HTML-компонентов с использованием чистого JavaScript (Vanilla JS) и Webpack в вашем пет-проекте есть несколько путей, которые можно рассмотреть. 

### Подходы к разработке HTML-компонентов:

1. **Pug (ранее Jade)**:
   - Pug — это шаблонизатор, который позволяет писать HTML-код более лаконично и структурированно. 
   - Он отлично подходит для создания компонентов и поддерживает вложенность, условные конструкции и циклы.
   - Чтобы использовать Pug с Webpack, вам потребуется установить несколько пакетов и настроить конфигурацию Webpack для обработки файлов Pug.

   Пример конфигурации Webpack с Pug:
   ```bash
   npm install pug pug-loader --save-dev
   ```

   В `webpack.config.js` добавьте правило для обработки Pug:
   ```javascript
   {
     test: /\.pug$/,
     use: ['pug-loader']
   }
   ```

2. **Gulp-file-include**:
   - Если вы ищете что-то более простое и не хотите использовать полноценный шаблонизатор, вы можете рассмотреть `gulp-file-include`. Это решение позволяет разбивать HTML-файлы на части и включать их в основной файл.
   - Это также экономит время на написание верстки, но не так кулационно, как Pug.

   Пример использования `gulp-file-include`:
   ```bash
   npm install gulp gulp-file-include --save-dev
   ```

   Пример задачи Gulp:
   ```javascript
   const gulp = require('gulp');
   const fileInclude = require('gulp-file-include');

   gulp.task('html', function () {
     return gulp.src('src/*.html')
       .pipe(fileInclude({
         prefix: '@@',
         basepath: '@file'
       }))
       .pipe(gulp.dest('dist'));
   });
   ```

### Готовые решения:

3. **Другие инструменты**:
   - Если вы хотите использовать более современные подходы, стоит рассмотреть использование библиотек для компонентного подхода, таких как Lit или Svelte, которые предлагают более мощное взаимодействие и взаимодействие между компонентами. Вы также можете создавать web-компоненты с использованием Vanilla JS с API Custom Elements.

### Рекомендации:
- Если вам важна простота, `gulp-file-include` может быть хорошим выбором для начала. 
- Если вы хотите больше контроля и возможностей, Pug — отличный выбор.
- Исследуйте современные фреймворки, если в будущем планируете делать более сложные проекты.

В итоге, выбор подхода зависит от ваших требований и предпочтений. Обе технологии (Pug и Gulp) являются хорошими и могут быть интегрированы в вашу рабочую среду с Webpack.