Как настроить компиляцию при yarn serve при сохранении (сейчас она появляется даже при написании кода)?

Чтобы настроить компиляцию при каждом сохранении при использовании команды yarn serve, вам потребуется внести изменения в файл конфигурации проекта. Вот несколько шагов, которые помогут вам настроить это в Webpack:

1. Прежде всего, убедитесь, что у вас установлен пакет webpack-dev-server. Вы можете установить его, выполнив команду yarn add --dev webpack-dev-server.

2. Создайте или откройте файл конфигурации Webpack (webpack.config.js) в корневом каталоге проекта.

4. В конфигурации Webpack найдите секцию, содержащую поле devServer. Если такого поля нет, создайте его. Пример:

module.exports = {
  //...
  devServer: {
    hot: true,
    watchContentBase: true,
  },
};

5. Добавьте в это поле следующие настройки:

• hot: true - включает горячую перезагрузку, позволяя вносить изменения в коде без полной перезагрузки страницы.
• watchContentBase: true - отслеживает изменения в файлах проекта и автоматически пересобирает при каждом сохранении.

6. Опционально (но рекомендуется): настройте поле watchOptions внутри devServer для дополнительных параметров отслеживания изменений. Пример:

module.exports = {
  //...
  devServer: {
    hot: true,
    watchContentBase: true,
    watchOptions: {
      ignored: /node_modules/,
    },
  },
};

В этом примере ignored: /node_modules/ указывает Webpack игнорировать изменения, которые происходят в папке node_modules. Это может помочь ускорить процесс компиляции, так как файлы в этой папке обычно не изменяются во время разработки.

7. Сохраните изменения в файле конфигурации Webpack.

Теперь, когда вы запустите команду yarn serve, webpack-dev-server будет следить за изменениями в файлах проекта и автоматически перекомпилировать их при каждом сохранении.