Webpack + PHP + Hot Reload

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

Так что занялся этим вопросом, и нашел достаточно простое решение. При этом мне удалось подключить Hot Reload, чтобы во время разработки CSS обновлялся без перезагрузки страницы.

Базовый конфиг вебпака можно взять из моей предыдущей статьи.

Настройка dev-server’а webpack’а

webpack.config.js

const devServerHost = 'http://localhost';
const devServerPort = 9000;
const assetsFolderName = 'assets';

const config = {
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, assetsFolderName),
    publicPath: isDevelopment ? (
      devServerHost + ':' + devServerPort + '/'
    ) : ''
  },

  ...

  devServer: {
    contentBase: path.join(__dirname, assetsFolderName),
    compress: true,
    port: devServerPort,
    overlay: {  // Вывод ошибок и предупреждений сборки в HTML
      warnings: true,
      errors: true
    },
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  }
};

module.exports = config;

Подключаем скрипт dev-server’а к index.html

Теперь нам требуется, чтобы наш локальный PHP-сервер узнал о dev-server’е webpack’а. По умолчанию мы будем подключать в index.html итоговый файлы сборки, а при наличии GET-параметра dev=true, будем подключать файл dev-server’а, что позволит использовать все преимущества hot reload.

Пример для twig (но это легко можно переписать на чистом php):

Итак, в режиме разработки запускаем команду npm start, после чего добавляем к URL вашего сайта флаг, например http://mysite?dev=true. Готово!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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