2016-10-29 9 views
8

私はwebpack-dev-serverによってノード上で動作するAngular 2 and Webpack 2 starterを持っており、web-apiを使ってvisual studioから実行するものは何ですか?ポート3000とIIS Expressの上angular2-のWebPACK-スターター実行のWebPACK-devのサーバーが別のポートで実行した場合webpackとiis expressを連動させるにはどうすればいいですか?

問題がある5000

私はHMRを使用してリロードしたいので、これは私にとって非常に重要ですファイルが変更されるたびに

どのようにそれらを組み合わせることができますか?同じポートで実行しますか?または他のソリューション?

答えて

11

見つけました。 - 既存のサーバーとの組み合わせ 要約と例:

開発中にバックエンドサーバーまたはその模擬サーバーを実行することができます。 webpack-dev-serverをバックエンドとして使用しないでください。その唯一の目的は静的な(Webpacked)資産を提供することです。

サイドバイサイドの2つのサーバーを実行できます。webpack-dev-serverとバックエンドサーバーです。

この場合、バックパックサーバーから送信されたHTMLページで実行している場合でも、webpack-dev-serverにリクエストするためにwebpackで生成されたアセットを教える必要があります。反対側では、webpack-dev-server上のアセットを指すスクリプトタグを含むHTMLページを生成するようにバックエンドサーバーを教える必要があります。これに加えて、webpack-dev-serverとwebpack-dev-serverランタイムを再コンパイル時にリロードするための接続が必要です。

webpack-dev-serverにリクエスト(チャンクローディングまたはHMR用)を行うようにwebpackに教えるには、output.publicPathオプションで完全なURLを指定する必要があります。

webpack-dev-serverとその実行時の接続を最適にするには、 - inlineでインラインモードを使用します。 webpack-dev-server CLIには、自動的にWebSocket接続を確立するエントリポイントが含まれています。 (バックエンドサーバーにwebpack-dev-serverの-content-baseを指定する場合は、iframeモードを使用することもできます)バックエンドサーバーへのWebソケット接続が必要な場合は、iframeモードを使用する必要があります。

あなたは自分のWebブラウザでバックエンドサーバのURLを開き、インラインモードを使用します。(あなたはWebPACKの-devのサーバーの/のWebPACKの-devのサーバー/接頭辞URLを開くインラインフレームモードを使用している場合。)

あなたは、あなたが始めるためにVUEのテンプレートを使用することができ、バージョン2を使用している場合https://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server

+4

このソリューションの作業用Webpackコンフィグレーションやサンプルコードとの良いリンクがありますか? – squadwuschel

0

受け入れ答えは、バージョン1のためである。

既存のvueテンプレートに基づいて、私はvue-cliでインストールできるvueテンプレートを作成しました。このテンプレートを使用すると、既存の環境で拡張したり統合したりすることができるvueアプリケーションを起動できます。

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

devwatch:

このテンプレートではなくWebPACKの-devのサーバーを使用してのfilechangesを監視する追加の実行devwatchオプションがあります。これにより、既存のWebサーバー環境で使用できるようになります。 livereloadを使用して、変更時にブラウザを更新します。

npm run devwatch 

DEV:

は、デフォルトのWebPACK-devのサーバーでそれを実行し<script src="http://localhost:35729/livereload.js"></script>index.htmlに削除するには:ビルド

npm run dev 

構築するためにあなたの生産のためのプロジェクト:

npm run build 
関連する問題