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

Question

HMR позволяет обновлять модули в реальном времени, избегая полной перезагрузки страницы. Webpack-dev-сервер отслеживает изменения, пересобирает только изменённые части и применяет их в браузере через WebSocket.

YeaHub · Accepted Answer

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 для стилей).