webpack "--watch" против "--hot": какая разница?

В чем разница между использованием

webpack --watch

а также

webpack-dev-server --hot

Благодарю.

Ответы

Ответ 1

Согласно документации webpack @https://webpack.github.io/docs/tutorials/getting-started/#watch-mode

При использовании режима просмотра webpack устанавливает файлы наблюдателей для всех файлов, которые использовались в процессе компиляции. Если обнаружено какое-либо изменение, он снова запустит компиляцию. Когда кеширование включено, webpack хранит каждый модуль в памяти и будет повторно использовать его, если он не изменился.

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

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

Итак, что такое webpack-dev-server --hot? В основном это добавляет HotModuleReplacementPlugin в конфигурацию webpack, которая по существу позволит вам только перезагрузить компонент, который был изменен, вместо того, чтобы полностью обновлять страницу! Довольно чертовски полезно, когда вы работаете с государствами! Согласно документации:

Каждый режим также поддерживает замену Hot Module, в котором пакет уведомляется о том, что произошло изменение вместо полной перезагрузки страницы. Среда выполнения Hot Module Replacement может загружать обновленные модули и вводить их в запущенное приложение.

Дополнительная информация о том, что это такое и как его использовать здесь: https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement

Надеюсь, это поможет понять webpack немного больше!