Как заставить Webpack dev server перезагружать страницу при исправленных ошибках?

Для того, чтобы заставить Webpack dev server автоматически перезагружать страницу при исправлении ошибок, можно воспользоваться следующими подходами:

1. Автоматическая перезагрузка с помощью плагина:
Для этого нужно установить плагин webpack-dev-middleware, который обеспечивает интеграцию между Webpack и сервером разработки. Затем в настройках webpack.config.js добавить следующий код:

   const webpack = require('webpack');
   
   module.exports = {
     // остальные настройки Webpack
   
     plugins: [
       new webpack.HotModuleReplacementPlugin()
     ],
   
     devServer: {
       hot: true
     }
   };

Данные настройки активируют горячую перезагрузку и включают соответствующий плагин.

2. Использование модуля react-hot-loader:
Если вы разрабатываете приложение на React, можно использовать модуль react-hot-loader, который позволяет автоматически перезагружать компоненты React без полной перезагрузки страницы.

Для этого нужно сначала установить модуль:

   npm install react-hot-loader

Затем необходимо изменить точку входа в приложение следующим образом:

   import { hot } from "react-hot-loader/root";
   import React from "react";
   import App from "./App";

   const HotApp = hot(App);

   ReactDOM.render(<HotApp />, document.getElementById("root"));

После этого при изменении компонентов React, соответствующая часть приложения будет автоматически перезагружаться без необходимости перезагрузки всей страницы.

3. Использование after хука в webpack-dev-server:
В webpack-dev-server есть возможность добавить дополнительные скрипты, которые будут запускаться после каждой компиляции. Можно воспользоваться этим для автоматической перезагрузки страницы. Пример конфигурации:

   const webpack = require('webpack');
   const path = require('path');
   
   module.exports = {
     // остальные настройки Webpack
   
     devServer: {
       // остальные настройки сервера
   
       after: function(app, server, compiler) {
         compiler.hooks.done.tap('done', function() {
           // Перезагрузка страницы после завершения компиляции
           server.sockWrite(server.sockets, 'content-changed');
         });
       }
     }
   };

В этом примере, после каждой компиляции сервера Webpack мы отправляем сигнал content-changed, извещающий клиентский браузер об изменении контента и вызывающий перезагрузку страницы.

4. Использование плагина webpack-dev-server:
webpack-dev-server также имеет встроенную поддержку автоматической перезагрузки страницы при изменениях в сборке. Для этого нужно добавить следующие опции в настройки webpack.config.js:

   module.exports = {
     // остальные настройки Webpack
   
     devServer: {
       hot: true,
       inline: true,
       overlay: true
     }
   };

С помощью этих опций для webpack-dev-server будет включена поддержка горячей перезагрузки, обновление содержимого страницы и отображение ошибок на самой странице.

Независимо от выбранного способа, настройки перезагрузки страницы в Webpack dev server могут немного отличаться в зависимости от версии Webpack и используемых плагинов. Поэтому рекомендуется обратиться к документации для получения полной информации о настройке автоматической перезагрузки при исправлении ошибок.