वेबपैक और आईआईएस एक्सप्रेस को एक साथ काम करने के लिए कैसे प्राप्त करें?

Question

मेरे पास Angular 2 and Webpack 2 starter है जो वेबपैक-डीवी-सर्वर द्वारा नोड पर चलता है, और मैं इसे वेब-एपीआई के साथ विजुअल स्टूडियो से कैसे चला सकता हूं।

समस्या

है जब angular2-webpack स्टार्टर रन पोर्ट 3000 और आईआईएस एक्सप्रेस पर webpack-देव-सर्वर भिन्न पोर्ट पर चलने 5000

यह मेरे लिए बहुत महत्वपूर्ण है, क्योंकि मैं HMR का उपयोग करें और फिर से लोड करना चाहते हैं हर बार फाइलें बदल जाती हैं।

तो, उन्हें एक साथ कैसे जोड़ा जा सकता है? एक ही बंदरगाह पर भागो? या कोई अन्य समाधान?

Answer 1

मुझे यह मिला! - मौजूदा सर्वर के साथ संयोजन सारांश और उदाहरण:

आप बैकएंड सर्वर या विकास में इसका एक मॉक चलाने के लिए इच्छुक हो सकते हैं। आपको बैकएंड के रूप में वेबपैक-देव-सर्वर का उपयोग नहीं करना चाहिए। इसका एकमात्र उद्देश्य स्थैतिक (वेबपैक) संपत्तियों की सेवा करना है।

आप दो सर्वरों को एक साथ चला सकते हैं: वेबपैक-देव-सर्वर और आपके बैकएंड सर्वर।

इस मामले में आपको वेबपैक-जेनरेटेड संपत्तियों को बैकएंड सर्वर द्वारा भेजे गए HTML-पृष्ठ पर चलते समय वेबपैक-dev-server को अनुरोध करने के लिए सिखाने की आवश्यकता है। दूसरी ओर आपको HTML बैकएंड सर्वर बनाने के लिए अपने बैकएंड सर्वर को सिखाने की आवश्यकता है जिसमें स्क्रिप्ट टैग शामिल हैं जो वेबपैक-देव-सर्वर पर संपत्तियों को इंगित करते हैं। इसके अलावा आपको वेबकैक-देव-सर्वर और वेबपैक-देव-सर्वर रनटाइम के बीच कनेक्शन की आवश्यकता है ताकि पुन: संकलन पर पुनः लोड किया जा सके।

वेबपैक-डच-सर्वर पर अनुरोध (खंड लोडिंग या एचएमआर के लिए) करने के लिए वेबपैक सिखाने के लिए आपको output.publicPath विकल्प में एक पूर्ण यूआरएल प्रदान करने की आवश्यकता है।

वेबपैक-देव-सर्वर और उसके रनटाइम के बीच कनेक्शन बनाने के लिए, इनलाइन मोड का उपयोग इनलाइन के साथ करें। वेबपैक-डीवी-सर्वर सीएलआई में स्वचालित रूप से एक एंट्री पॉइंट शामिल होता है जो वेबस्केट कनेक्शन स्थापित करता है। (यदि आप अपने बैकएंड सर्वर पर वेबपैक-डीवी-सर्वर का - सामग्री-बेस इंगित करते हैं तो आप आईफ्रेम मोड का भी उपयोग कर सकते हैं। अगर आपको अपने बैकएंड सर्वर से वेबस्केट कनेक्शन की आवश्यकता है, तो आपको आईफ्रेम मोड का उपयोग करना होगा।

आप बस अपने वेब ब्राउज़र में बैकएंड सर्वर URL खोलता है। (आप iframe मोड/webpack-देव-सर्वर/webpack-देव-सर्वर का उपसर्ग के URL खोलने का उपयोग करते हैं।)

इनलाइन मोड का उपयोग करें आप संस्करण 2 का उपयोग कर रहे आप पाने के लिए एक Vue टेम्पलेट का उपयोग कर सकते हैं कि आप आरंभ https://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server

Answer 2

स्वीकार किए जाते हैं जवाब संस्करण 1. के लिए है।

मौजूदा vue-templates के आधार पर मैंने एक vue टेम्पलेट बनाया है जिसे आप vue-cli के साथ इंस्टॉल कर सकते हैं। यह टेम्पलेट आपको एक ऐसे अनुप्रयोग के लिए कूदता है जो आप मौजूदा वातावरण में विस्तार या एकीकृत कर सकते हैं।

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

devwatch:

इस टेम्पलेट एक अतिरिक्त रन devwatch विकल्प है कि बजाय webpack-देव-सर्वर का उपयोग करने का filechanges के लिए देखता है। यह किसी भी मौजूदा वेबसर्वर पर्यावरण के लिए उपयोग करने योग्य बनाता है। यह परिवर्तन पर आपके ब्राउज़र को अपडेट करने के लिए लाइवरेलोड का उपयोग करता है।

npm run devwatch 

देव:

, डिफ़ॉल्ट webpack-देव-सर्वर के साथ इसे चलाने index.html में <script src="http://localhost:35729/livereload.js"></script> दूर करने के लिए:

npm run dev 

निर्माण:

निर्माण करने के लिए अपने उत्पादन के लिए परियोजना:

npm run build