Это пост с инструкциями по настройке webpack-dev-сервера с включенным HMR для работы бок о бок с сервером Laravel.
Важно: я предполагаю, что у вас есть работающий файл конфигурации веб-пакета, поэтому я не буду вдаваться в подробности о том, как настроить ваши загрузчики и плагины.
Чего мы хотим достичь
Команда webpack-dev-server запускает статический файловый сервер для обслуживания сгенерированных пакетов и файлов в настроенной корневой папке. Это хорошо, если вы просто кодируете проекты на чистом HTML / CSS / JS. Проблема, которая возникает при разработке приложения с файлами PHP, заключается в том, что наши файлы не могут обрабатываться этим статическим файловым сервером.
Обычный процесс разработки с помощью webpack будет выглядеть следующим образом:
- запустить webpack-dev-сервер на http: // localhost: 8080
- позвоните http: // localhost: 8080
- начать кодирование
Интегрируя это с Laravel, нам нужно запустить webpack-dev-server бок о бок с нашим обычным PHP-сервером. Для этой настройки процесс будет выглядеть следующим образом:
- запустить webpack-dev-сервер на http: // localhost: 8080
- запустить PHP-сервер на http: // localhost: 8000
- позвоните http: // localhost: 8000
- начать кодирование
Уловка здесь в том, что мы обслуживаем сгенерированный пакет не через PHP-сервер, а через webpack-dev-server. Мы делаем это, просто ссылаясь на URL-адрес webpack-dev-server как на источник наших скриптов.
Итак, вместо этого:
<script src="/assets/app.js"></script>
мы включаем это в режим разработки:
<script src="http://localhost:8080/main.js"></script>
Конфигурация веб-пакета
Webpack-dev-сервер можно настроить в разделе devserver файла webpack.config.js.
devserver: {
hot: true, // this enables hot reload
inline: true, // use inline method for hmr
host: "localhost",
port: 8080,
contentBase: path.join(__dirname, "public"), // should point to the laravel public folder
watchOptions: {
poll: false // needed for homestead/vagrant setup
}
}
В настройках вывода вашей конфигурации вы должны указать общедоступный путь к URL-адресу, который соответствует URL-адресу webpack-dev-server.
output: {
/*
...
*/
publicPath: 'http://localhost:8080'
}
Наконец, вам нужно включить плагин HMR в раздел плагинов конфигурации вашего веб-пакета.
plugins: [ new webpack.HotModuleReplacementPlugin() ]
Запуск ваших серверов
Используя встроенный сервер Laravel на localhost: 8000 и webpack-dev-server на localhost: 8080, вы теперь сможете обслуживать свое приложение с активированной HMR. Поэтому всякий раз, когда вы меняете свой JavaScript, вместо полной перезагрузки страницы модули заменяются на лету.
