symfony webpack encore Установка и работа через npm (без yarn)

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

Установка

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

composer require encore

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

npm install

Сборка

Есть 4-ре предустановленных скрипта с такими вот определениями (см. package.json), сначала идет имя "скрипта" (по сути - команды), а потом то, что она из себя представляет, как видим, в отличие от прямого использования вебпак здесь команду встречает энкор, который уже где-то в своих недрах вызовет вебпак:

• dev-server: "encore dev-server"

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

  ПРИМЕЧАНИЕ: этот режим может потребовать явного указания таймаутов в конфиге.

• dev: "encore dev"

  -- сборка при разработке.

• watch: "encore dev --watch"

  -- сборка для разработки с автоматической пересборкой при изменении файлов (используйте именно её при разработке на локальной машине)

  ПРИМЕЧАНИЕ: этот режим может потребовать явного указания таймаутов в конфиге.

• build: "encore production --progress"

  -- сборка для продакшена (запускаем, например, при деплое).

Например, чтобы запустить просто автоматическую сборку при изменении файлов на локальной машине надо выполнить в консоли (в корне проекта):

npm run-script watch

Правка package.json scrips

Выясняется, что некоторые команды надо поправить, например для дев-сервера:

"scripts": {
    "dev-server": "encore dev-server --port 3000 --host mysite.loc",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
}

(в symfony4 в частности поэтому)

Источники

• webpack encore: https://symfony.com/doc/current/frontend...
• Продвинутая настройка webpack encore: https://symfony.com/doc/current/frontend...