Как получить webpack и iis express для совместной работы?

Question

У меня есть Angular 2 and Webpack 2 starter, которые работают на узле webpack-dev-server, и я запускаю его из визуальной студии с помощью web-api.

Проблема заключается в том, когда angular2-WebPack стартер запустить WebPack-DEV-сервер на порту 3000. и IIS Express работает на другом порту 5000.

Это очень важно для меня, потому что я хочу использовать HMR и перезагрузить каждый раз, когда файлы изменяются.

Итак, как их объединить? работать на одном порту? или любое другое решение?

Answer 1

Я нашел его! - Объединение с существующим сервером Резюме и пример:

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

Вы можете запускать два сервера бок о бок: Webpack-dev-сервер и ваш сервер.

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

Чтобы научить webpack делать запросы (для загрузки кусков или HMR) на webpack-dev-сервер, вам необходимо указать полный URL-адрес в опции output.publicPath.

Чтобы установить соединение между webpack-dev-сервером и его временем выполнения, используйте встроенный режим с -inline. CLI webpack-dev-server автоматически включает точку входа, которая устанавливает соединение WebSocket. (Вы также можете использовать режим iframe, если вы указываете --content-base webpack-dev-сервера на ваш серверный сервер. Если вам нужно подключение к веб-серверу на ваш серверный сервер, вам придется использовать режим iframe.

при использовании режима инлайн просто открыть URL сервера конца в своих веб-браузеров. (Если используется режим IFrame открыть/WebPack-DEV-сервер/приставкой URL в WebPack-DEV-сервер.)

https://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server

Answer 2

Принятый ответ для версии 1. Если вы используете версию 2 вы можете использовать шаблон VUE, чтобы вы начали.

На основе существующих шаблонов vue я создал шаблон vue, который вы можете установить с помощью vue-cli. Этот шаблон запускает вас для приложения VUE, которое вы можете расширить или интегрировать в существующую среду.

npm install -g vue-cli 
vue init delcon/webpack-simple 
cd my-project 
npm install 

devwatch:

Этот шаблон имеет дополнительный параметр запуска devwatch, что часы для filechanges вместо использования WebPack-DEV-сервер. Это делает его пригодным для использования в любой существующей среде веб-сервера. Он использует функцию увеличения, чтобы обновить браузер при внесении изменений.

npm run devwatch 

Dev:

, чтобы запустить его с WebPack-DEV-сервера по умолчанию, удалить <script src="http://localhost:35729/livereload.js"></script> в index.html:

npm run dev 

сборки:

, чтобы построить свой проект по производству:

npm run build