Webpack добавляет режим просмотра без компиляции
У меня есть следующие сценарии 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-шаблон, в который вставляю скрипты с помощью веб-пакета на клиенте, и использую этот шаблон для серверного рендеринга в серверном скрипте).
Почти во всех случаях клиент завершает компиляцию перед сервером, но при одновременном запуске этих скриптов невозможно гарантировать, что это всегда будет так.
При работе в режиме просмотра веб-пакета невозможно запускать эти сценарии последовательно, так как режим просмотра блокирует выполнение второго сценария.
Наиболее очевидным решением, на мой взгляд, является скомпилировать их без режима просмотра один раз, а затем подключить режим просмотра на лету после первоначальной компиляции. Я не уверен, как этого добиться, и я не хотел бы компилировать их дважды, только ради подключения режима просмотра.
Второй вариант, который я имею в виду, — это возиться с плагином прогресса веб-пакета и каким-то образом скомпилировать серверный скрипт после завершения клиентского скрипта. Мне не нравится это решение, потому что я не хочу жестко связывать один сценарий с другим.
Итак, есть ли способ последовательно запускать компиляцию клиента и сервера из сценария npm при использовании режима webpack --watch?
@felixmosh Я просто прочитал html-файл с помощью nodejs fs.readFile.
Итак, ваш сервер «запускается» до того, как клиент закончил его сборку, как вы запускаете свой сервер?
@felixmosh ответил. Пишите свои мысли в комментариях, вдруг у вас будут замечания.
Ответы 2
Возможно, это поможет вам параллельный веб-пакет, хотя я не пробовал, у него есть режим просмотра и, вероятно, просто потребуется подключить ваши конфигурации как для сервера, так и для клиента следующим образом:
// some script for running parallel builds
module.exports = [
require('./webpack.server.dev.config.js'),
require('./webpack.client.dev.config.js'),
];
затем проверьте работает в режиме часов
Проблема в том, что я не хочу строить их параллельно, а последовательно с режимом просмотра.
@Trace для меня это выглядит так, как будто после того, как все построено последовательно в первый раз, вы запускаете его параллельно, но без помощи parallel-webpack некоторые сборки завершаются быстрее, чем другие, и у вас есть некоторый разрыв синхронизации, который должен быть исправлен с помощью parallel-webpack хотя я не использовал его в большем масштабе и не уверен, что это действительно поможет вам, я бы посоветовал попробовать, если нет лучшей идеи
Параллельный бег противоположен последовательному: вы не знаете, какой из них финиширует первым из-за условий гонки. На самом деле, я думаю, что нашел способ это исправить. Спасибо
@Trace, можешь поделиться своим решением?
Я нашел хорошее решение, используя ожидание пакета npm:
https://github.com/jeffbski/wait-on
Сценарий npm, который я использовал (Unix и Windows):
"start:iso:dev": "export NODE_ENV=development && npm run clean:build && npm run build:client:dev & wait-on public/build/index-dev.html && npm run build:server:dev --inspect",
"start:iso:dev:win": "npm run clean:build:win && set NODE_ENV=development&& concurrently \"npm run build:client:dev\" \"wait-on public\\build\\index-dev.html && npm run build:server:dev\"",
Это работает как шарм.
У меня была такая же проблема в моем приложении, как вы «используете» файл
html, который создается при сборке клиента?