Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs т. Д.

Я начинаю работать с webpackс node/expressокружающей средой разрабатывающей ReactJSстороны сервера вынесенным приложением с react-router. Я очень запутался в роли каждого пакета webpack для сред dev и prod (runtime).

Вот краткое изложение моего понимания:

webpack: Пакет, инструмент для объединения различных частей веб-приложения и объединения их в один файл .js (обычно bundle.js). Затем файл результатов подается в среду prod для загрузки приложением и содержит все необходимые компоненты для запуска кода. Функции включают сжатие кода, минимизацию и т. Д.

webpack-dev-server: Пакет, который предлагает сервер для обработки файлов веб-сайта. Он также создает один файл .js ( bundle.js) из клиентских компонентов, но обслуживает его в памяти. У него также есть опция ( -hot) для мониторинга всех файлов сборки и создания нового пакета в памяти в случае изменения кода. Сервер обслуживается прямо в браузере (например:) http:/localhost:8080/webpack-dev-server/whatever. Комбинация загрузки в память, горячей обработки и обслуживания браузера позволяет пользователю обновлять приложение в браузере при изменении кода, что идеально для среды разработки.

Если у меня есть сомнения по поводу приведенного выше текста, я действительно не уверен в содержании ниже, поэтому, пожалуйста, сообщите мне, если необходимо

Общая проблема при использовании webpack-dev-serverс в node/expressтом , что webpack-dev-serverявляется сервером, как есть node/express. Из-за этого в этой среде сложно запускать и клиент, и некоторый код узла / экспресс (API и т. Д.). ПРИМЕЧАНИЕ: Это то, с чем я столкнулся, но было бы здорово понять, почему это происходит более подробно ...

webpack-dev-middleware: Это промежуточное ПО с webpack-dev-serverтакими же функциями (объединение памяти, горячая перезагрузка), но в формате, который может быть введен в server/expressприложение. Таким образом, у вас есть своего рода сервер ( webpack-dev-serverинсайдер) сервера узла. Ой: Это сумасшедший сон ??? Как эта статья может решить уравнение разработчиков и продуктов и сделать жизнь проще

webpack-hot-middleware: Это ... Застрял здесь ... нашел этот кусок, когда искал webpack-dev-middleware... Не знаю, как его использовать.

ENDNOTE: Извините, что вы ошиблись. Мне действительно нужна помощь, чтобы разобраться в этих вариантах в сложной среде. Если это уместно, добавьте больше пакетов / данных, которые построят весь сценарий.

webpack

Как вы описали, Webpack - это сборщик модулей, он объединяет различные форматы модулей в первую очередь, чтобы их можно было запускать в браузере. Он предлагает как CLI, так и Node API .

webpack-dev-middleware

Промежуточное ПО Webpack Dev - это промежуточное ПО, которое можно смонтировать на экспресс-сервере для обслуживания последней компиляции вашего пакета во время разработки. Он использует webpackAPI-интерфейс Node в режиме наблюдения и вместо вывода в файловую систему выводит в память .

Для сравнения, вы можете использовать что-то вроде express.staticэтого промежуточного программного обеспечения в производстве.

webpack-dev-server

Webpack Dev Server сам по себе является экспресс- сервером, который использует webpack-dev-middlewareдля обслуживания последнего пакета и дополнительно обрабатывает запросы горячей замены модуля (HMR) для обновлений модулей в реальном времени в клиенте.

webpack-hot-middleware

Webpack Hot Middleware является альтернативой, webpack-dev-serverно вместо того, чтобы запускать сам сервер, он позволяет вам монтировать его на существующем / настраиваемом экспресс-сервере рядом webpack-dev-middleware.

Также...

webpack-hot-server-middleware

Чтобы еще больше запутать ситуацию, есть также промежуточное ПО Webpack Hot Server, которое предназначено для использования вместе webpack-dev-middlewareи webpack-hot-middlewareдля обработки горячей замены модулей приложений, отображаемых на сервере.

На момент обновления в 2018 году и с учетом примечания webpack-dev-server на его официальной странице GitHub:

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

Что было бы естественным выбором для создания Webpack HMR?