подключить сервер разработки веб-пакетов (HMR) к проекту PHP, работающему с виртуальным хостом

В настоящее время я разрабатываю плагин WordPress с интерфейсом React. Я попытался подключить свой бэкенд (PHP), работающий на виртуальном хосте, с сервером разработки webpack с заменой горячего модуля (HMR).

Есть какой-нибудь конфиг как это сделать.

примечание: я пробовал с прокси-сервером devserver, но не могу понять.

Заранее спасибо.


webpack php virtualhost webpack-dev-server wordpress-plugin-creation
person user13103887    schedule 05.05.2021    source источник
comment
Можете ли вы объяснить, как PHP связан с Webpack и HMR? Webpack предназначен для JavaScript, а не для PHP-кода. И HMR работает в зависимости от того, где вы запускаете сервер разработки — на локальном ПК или на удаленном сервере.   -  person IVO GELOV    schedule 09.05.2021
comment
На самом деле, я разрабатываю плагин для WordPress, где мой плагин запускается в файле index.php внутри проекта WordPress, который также запускается из файла PHP. Если я запускаю свой проект Javascript индивидуально, он не может наследовать какие-либо свойства и конфигурацию от родительского проекта WordPress. Итак, я хочу запустить свое приложение через WordPress и продолжать смотреть мои файлы js.   -  person user13103887    schedule 10.05.2021
comment
Я до сих пор не понимаю, как Webpack будет выполнять ваши PHP-скрипты (когда поступает запрос от браузера), чтобы затем он мог обслуживать вывод PHP через сервер разработки?   -  person IVO GELOV    schedule 10.05.2021
comment
Проще говоря, мой проект работает через PHP-сервер с index.php, и в этот файл включен некоторый файл javascript. поэтому я хочу посмотреть эти js, используя HMR. Browsersync может это сделать, но это не HMR   -  person user13103887    schedule 10.05.2021
comment
Я сомневаюсь, что ты сможешь это сделать. HMR так не работает.   -  person IVO GELOV    schedule 10.05.2021
comment
Я думаю, может быть, есть способ, потому что я могу интегрироваться с плагином BrowserSync с прокси. например, Browsersync с запуском localhost:3000 и проксированием my-virtual-host-domain.dev . Но в Browsersync нет функции HMR.   -  person user13103887    schedule 10.05.2021
comment
Мне любопытно - если Browsersync работает локально на вашем ПК, а PHP-скрипты, генерирующие код JavaScript, выполняются на your-vps-domain.dev, который находится где-то на удаленном сервере, то как Browsersync определяет, когда вы меняете файлы PHP на сервере?   -  person IVO GELOV    schedule 10.05.2021
comment
нет, это не другой сервер. Он работает на моем localhost:80/project. Я только что настроил виртуальный хост и изменил etc/hosts.   -  person user13103887    schedule 11.05.2021
comment
виртуальные хосты вашего локального проекта могут быть легко сгенерированы Laragon.   -  person user13103887    schedule 11.05.2021
comment
Возможно, это может вам помочь — devs- group.medium.com/, stackoverflow.com/a/46672346/5962802, dev.to/felipperegazio/, symfonycasts.com/screencast/javascript-webpack/   -  person IVO GELOV    schedule 12.05.2021

Ответы (1)


arrow_upward
0
arrow_downward

Получение HMR всегда сложно для таких пользовательских настроек. Теоретически это довольно просто. Вам просто нужно запустить webpack-dev-server с модулем HMR. В вашем файле PHP убедитесь, что он использует файл JS, сгенерированный из webpack-dev-server. Код для обновления упакован в файл JS, поэтому он должен работать.

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

Проблема, с которой вы, вероятно, столкнетесь, связана с безопасностью, поскольку соединение через веб-сокет ожидает другого хоста. В этом случае вы можете использовать конфигурацию из следующего ответа: Я получаю сообщение Invalid Host header при удаленном подключении к webpack-dev-server

Другая проблема может заключаться в том, что файл JS пытается подключиться к неправильному местоположению. Например: он думает, что ваш хост находится там, где находится соединение с веб-сокетом. В этом случае вы можете использовать настройку public. Документацию см. здесь: https://webpack.js.org/configuration/dev-server/#devserverpublic

Для меня это похоже на работу с обратным прокси. Вы можете посмотреть это обсуждение, чтобы понять проблему: https://github.com/webpack/webpack-dev-server/issues/804

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

То, как вы ссылаетесь на сгенерированный файл js, — это отдельная проблема. Простым примером может быть установка порта на 8081 и объединение файла js в bundle.js. Затем в вашем php-коде укажите его как http://localhost:8081/bundle.js

person Vija02    schedule 14.05.2021