Привет Джейк,

У меня была аналогичная проблема. Проблема заключалась в том, что я неправильно назвал свой файл webpack.config.js. Как только я исправил имя, webpack-dev-server смог собрать bundle.js

Причина переключения на порт 8080 заключается в том, что именно с него webpack-dev-server обслуживает «bundle.js». Исходный сервер, работающий на порту 3000, по-прежнему требуется для обслуживания компонентов React, отображаемых на стороне сервера.

В режиме разработки два сервера работают вместе. Webpack-dev-server создает файл bundle.js и обслуживает его. Все остальные запросы передаются на другой сервер, работающий на порту 3000. Таким образом, все проходит через 8080, но все, что там не обслуживается, проходит через 3000.

Вы можете увидеть эту настройку в файле webpack.config.js в ключе devServer:proxy вашего файла webpack-config.js.

Это дает вам все классные инструменты разработки, такие как перезагрузка в реальном времени, горячая замена модулей и инструменты разработки с избыточностью.

После сборки производственного пакета вам больше не нужен webpack-dev-server. Все будет обслуживаться с экспресс-сервера (который в этой настройке работает на 3000)

Для получения дополнительной информации см. документы webpack-dev-server по настройке прокси. И раздел по использованию двух серверов вместе. Однако обратите внимание, что в конце раздела с двумя серверами говорится, что вы можете просто использовать метод прокси. :-)

Надеюсь, это поможет
Тодд