webpack encore

В сравнении с "обычной" сборкой энкора следует сделать следующее:

1. Выключить сбор CSS в отдельный файл через вызов disableCssExtraction()
2. Выключить сборку runtime.js в отдельный файл: для этого вместо enableSingleRuntimeChunk() используем disableSingleRuntimeChunk()
3. Не вызывать метод splitEntryChunks() "разбивки" сборки не несколько файлов с целью оптимизации

В итоге настройка для виджета может выглядеть как-то так:

Чтобы CSS собирался внутрь JS файла, используйте вызов:

Encore.disableCssExtraction()

например:

Самым простым решением является создание дополнительной конфигурации вебпака, для тех файлов, которым не нужно кэширование, например (в webpack.config.js):

В Symfony 4.3 можно использовать вызов (webpack.config.js):

Encore
    .addAliases({ // псевдонимы путей для более удобной загрузки 
// вне зависимости от уровня вложенности файл в приложении
        '@universal': path.resolve(__dirname, 'assets/js/react/components/universal'),
      },
    );

После чего вместо путей типа:

import FormSection from '../../../universal/form/FormSection'

использовать:

Warning: Invalid DOM property class

Известно что вместо напр. class в React надо писать className,
подобные проблемы можно убрать используя babel-plugin-react-html-attrs

Стандартная установка идет так:

Запускайте дев-сервер с опцией --host (можно добавить её в команду из package.json), например:

--host mysite.loc

в качестве адреса можно указать тот, на котором работает ваша страница, которую и требуется перезагружать при обновлении js.

Подробнее об опции: https://webpack.js.org/configuration/dev...

Webpack Encore

То же самое в symfony 4 можно решить модификации package.json, в моем случае, я использовал формат:

По сути encore является дополнением (оберткой) к Webpack, поэтому многие его команды тоже являются надстройками/упаковками над близкими по смыслу возможностями webpack-а.

Установка

Сначала ставим обычным образом энкор:

composer require encore

Потом подтягиваем зависимости с помощью npm: