Я работал над страницей, состоящей из нескольких проектов javascript с разными зависимостями и конфигурациями. В целом, эти проекты компилируются до одного js-ресурса для конкретного проекта для соответствующего пути.
Один из моих любимых пакетов для webpack — webpack-dev-server. К сожалению, это невозможно использовать для нескольких проектов одновременно. Поэтому я использовал API узла веб-пакета и экспресс-сервер для создания сервера разработки, который работал для нескольких проектов.
Обслуживая js-ресурсы с экспресс-сервера, ресурсы можно компилировать на лету, а затем обслуживать. Таким образом, просмотр файлов и HMR могут быть включены для последнего запрошенного ресурса, что делает работу разработчика более удобной, без необходимости запускать и закрывать разные серверы разработки.
Кроме того, этот тип кода может быть развернут, например. amazon lambda и обслуживать контент за CDN, но, конечно, без функций dev.
Используя Rxjs, код становится легко читаемым. Поток webpackConfig$ состоит из путей к конфигам webpack.
Маршруты, используемые экспресс-приложением, получены из конфигурации веб-пакета:
Также в конфигурацию веб-пакета добавляются плагины и свойства конфигурации разработки/производства.
После анализа конфигурации веб-пакета сгенерированный маршрут передается функции маршрута:
Каждый путь конфигурации веб-пакета сопоставляется с потоком входящих запросов GET. В этом потоке URL-адрес без параметров запроса и обратной косой черты соответствует запрошенному файлу.
После этого следуют шаги сборки, в которых используется API узла веб-пакета для создания конфигурации. Для разработки используется webpack-hot-middleware.
Входящий запрос сопоставляется с потоком, возвращаемым из startWebpack$, который, в свою очередь, сопоставляется с памятью fs. Поток веб-пакета состоит из переноса конфигурации веб-пакета в память fs.
Когда память fs заполняется файлами, выведенными из веб-пакета, считывается конкретный файл, запрошенный пользователем, чтобы его можно было отправить обратно с помощью res.send.
Для окончательной отправки ответа с файлом обратно пользователю используется оператор sendReponse:
