Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs и т.д.

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

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

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

webpack-dev-server: пакет, предлагающий сервер для обработки файлов сайта. Он также создает отдельный файл .js(bundle.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-dev-server узла. Ой: это безумный сон??? Как этот кусок может решить уравнение разработки и разработки и сделать жизнь проще

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

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

Ответ 1

`webpack`

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

`webpack-dev-middleware`

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

Для сравнения вы можете использовать что-то вроде 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 Middleware, которое предназначено для использования рядом с webpack-dev-middleware и webpack-hot-middleware для обработки горячей замены модулей серверных приложений.

Ответ 2

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

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

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