Допустим, во время разработки ваше приложение открыто в окне браузера, и вы перешли на страницу или состояние шага 3 какого-то многоэтапного процесса, когда вы понимаете, что вам нужно изменить какой-то стиль или некоторые функции модуля, используемого в шаг 3.
Обычно это означало бы без веб-пакета: в редакторе вы вносите необходимое изменение кода в файл модуля, сохраняете его, перекомпилируете / перекомпилируете приложение и обновляете браузер, который перезагружает приложение. и вам нужно снова начать с шага 1, чтобы убедиться, что изменения вашего кода работают должным образом.
Webpack предоставляет функцию под названием Hot Module Replacement (HMR), webpack-dev-server (WDS) добавляет HotModuleReplacementPlugin в конфигурацию webpack и с помощью этого плагина, когда ваше приложение обслуживается из WDS, всякий раз, когда вы изменяете и сохраняете любой модуль или компонент в коде вашего приложения, то на сервере webpack-dev-server он заменит модуль без необходимости перезагружать страницу и без потери состояния приложения. (Как работает HMR Webpack?)
WDS использует watch режим webpack. Таким образом, когда мы добавили devServer в наш webpack.config.js, нам не нужно указывать watch:true в файле конфигурации.
