Webpack добавить режим просмотра без компиляции

Question

У меня есть следующие скрипты npm:

"build:server:dev": "webpack --config ./webpack.server.dev.config.js --watch",
"build:client:dev": "webpack --config ./webpack.client.dev.config.js --watch",
"build:server:prod": "webpack --config ./webpack.server.prod.config.js",
"build:client:prod": "webpack --config ./webpack.client.prod.config.js",
"start:server:prod": "export NODE_ENV=production && node ./dist/server.*.js",
"start:iso:dev": "export NODE_ENV=development && npm run build:client:dev & npm run build:server:dev",
"start:iso:dev:win": "set NODE_ENV=development && concurrently --kill-others \"npm run build:client:dev\" \"npm run build:server:dev\"",
"start:iso:prod": "npm run build:client:prod && npm run build:server:prod && npm run start:server:prod"

Проблема, с которой я сталкиваюсь, заключается в том, что компиляция сервера зависит от компиляции клиента (я генерирую HTML-шаблон, в который я внедряю скрипты с веб-пакетом на клиенте, и я использую этот шаблон для рендеринга сервера в скрипте сервера).
Почти во всех случаях клиент заканчивает компиляцию перед сервером, но при одновременном запуске этих сценариев невозможно гарантировать, что это всегда будет так.
При запуске режима просмотра webpack невозможно выполнить эти сценарии последовательно, так как режим просмотра заблокирует запуск второго сценария.

Самое очевидное решение на мой взгляд - это скомпилировать их без режима просмотра один раз, а затем подключить режим наблюдения на лету после первоначальной компиляции.
Я не уверен, как этого добиться, и я не хотел бы компилировать их дважды, просто для того, чтобы добавить режим просмотра.

Вторая альтернатива, которую я имею в виду, - это поиграть с плагином прогресса webpack и каким-то образом скомпилировать серверный скрипт после того, как клиентский скрипт завершится.
Мне не нравится это решение, потому что я не хочу жестко связывать один скрипт с другим.

Так есть ли способ запустить компиляцию клиента и сервера последовательно из сценария npm при использовании режима webpack --watch?

Answer 1

Я на самом деле еще не реализовал это, но теоретически я думаю, что следующее должно работать.

Итак, я бы получил:

--> webpack client compile (without webpack --watch) 
    --> webpack server compile 
    --> watch ./client/index (--> recompile) running in parallel 

Проблема в том, что я не уверен, как подключить режим webpack --watch после его компиляции.
Вместо того, чтобы снова запускать webpack --watch после первоначальной клиентской компиляции, я предлагаю использовать другой пакет npm для наблюдения за изменениями файловой системы и запустить собственный JS-скрипт, который выполняет компилятор webpack через код.

Это исправляет проблему для начальной компиляции. Для более поздних обновлений кода это по-прежнему не решает реальную проблему, т. Е. Завершаются ли обновления клиента до сервера (хотя я обнаружил, что мои обновления работают в 100% случаев в настоящее время).

Я создал ручную реализацию для горячей перезагрузки и автоматического обновления браузера:

https://github.com/kimgysen/isomorphic-react-setup

Я думаю, что вы можете создать собственную реализацию здесь:

    if (module.hot) {
        module.hot.accept('./server', async () => {

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

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

Answer 2

Может быть, это поможет вам parallel-webpack , хотя я не пробовал его, он имеет режим просмотра и, вероятно, просто потребовал бы подключения ваших конфигов как для серверной, так и для клиентской стороны каким-то образом:

// some script for running parallel builds
module.exports = [
  require('./webpack.server.dev.config.js'),
  require('./webpack.client.dev.config.js'),
];

, затем отметьте в режиме просмотра