Обновление App

С некоторых пор я плотно переехал на Webpack, так что решил обновить и свою заготовку для создания сайтов App.

Точкой входа во frontend приложение служит _build/assets/js/index.js, там вот такой код:

import 'jquery'
import 'bootstrap'
import '../scss/index.scss'

console.log('App is loaded!');

В чём прикол, по сравнению с Gulp? Ну в том, что нам нужна только эта точка входа для работы, в которой импортируются и скрипты и стили. А дальше Webpack уже сам всё разбирает:
— берёт указанные скрипты, проходит по ним, находит зависимости и тащит с собой
— затем проходит по стилям, обрабатывает пути к файлам и тащит импорты
— копирует и минифицирует изображения
— скрипты, стили, шрифты и картинки раскладываются в соответствующие директории
— а конечные директории перед этим очищаются от старых файлов
— имена файлов называются с припиской их хэша из 8 символов, для грамотного кэширования
— за всё это отвечает единый конфиг и при добавлении новых библиотек в нём ничего менять не нужно, просто импортировать их в index.js

В итоге получается вот такая картина в assets:


Так как имена файлов меняются, генерируется еще и специальный манифест с их именами:

{
  "bootstrap.js": "/assets/components/app/js/bootstrap.7ee522b0.min.js",
  ...
  "fonts/fa-solid-900.woff": "/assets/components/app/fonts/fa-solid-900.0be94a07.woff",
  "fonts/fa-solid-900.woff2": "/assets/components/app/fonts/fa-solid-900.64b3e814.woff2",
  "jquery.js": "/assets/components/app/js/jquery.a93a223a.min.js",
  "main.css": "/assets/components/app/css/main.628a6812.min.css",
  "main.js": "/assets/components/app/js/main.41054e11.min.js",
  "popper.js.js": "/assets/components/app/js/popper.js.103f3354.min.js"
}

Дальше дело техники получить его в плагине на OnBeforeRegisterClientScripts и подключить скрипты со стилями на страницу:

$manifest = MODX_ASSETS_PATH . 'components/app/manifest.json';
if (file_exists($manifest)) {
    $files = json_decode(file_get_contents($manifest), true);
    foreach ($files as $file) {
        if (strpos($file, '.css')) {
            $modx->regClientCSS($file);
        } elseif (strpos($file, '.js')) {
            $modx->regClientScript($file);
        }
    }
}

Больше про версии ассетов думать не нужно. Просто вызывайте npm run build перед сборкой и установкой App. Понятное дело, есть и npm run watch для разработки.


Как видите, автоматически грузится и шрифт FontAwesome который обработан через импорт в scss и скопирован в директорию fonts.

Помимо автоматизации вы можете использовать и все прелести ECMAScript 6, конечно. Можно подключать хоть Vue, хоть React, хоть чёрта лысого.

Всем приятной разработки!

filename: options.mode == 'production'
             ? 'css/[name].[contenthash:8].min.css'
             : 'css/[name].css',

'pdoTools' => [ 
        'version' => '2.12.3-pl',
        'service_url' => 'modstore.pro',
],