Как webpack-dev-сервер обрабатывает замену горячего модуля (HMR)?

Hot Module Replacement (HMR) — это функция Webpack, которая улучшает процесс разработки. Вместо перезагрузки всей страницы, изменённый код подгружается в браузер, что сохраняет текущее состояние приложения (например, данные в формах).

HMR работает через WebSocket:

• Отслеживание изменений: Webpack следит за изменениями файлов с помощью watch mode.

• Сборка и уведомление: Когда файл меняется, Webpack пересобирает только этот модуль и отправляет обновления в браузер.

• Применение изменений: Браузер применяет изменения через HMR API без перезагрузки страницы.

Настройка HMR:

module.exports = {
  	devServer: {
    		hot: true, // Включает HMR
  	},
};

Пример использования с React:

if (module.hot) {
  	module.hot.accept('./App', () => {
    		const NextApp = require('./App').default;
    		ReactDOM.render(<NextApp />, document.getElementById('root'));
  	});
}

HMR ускоряет цикл разработки, особенно для SPA, но требует поддержки в коде или соответствующих загрузчиков (например, style-loader для стилей).