ওয়েবপ্যাক বনাম ওয়েবপ্যাক-ডেভ-সার্ভার বনাম ওয়েবপ্যাক-ডেভ-মিডলওয়্যার বনাম ওয়েবপ্যাক-হট-মিডলওয়্যার বনাম ইত্যাদি


96

আমি webpackএকটি node/expressপরিবেশের সাথে ReactJSসার্ভার সাইড রেন্ডার অ্যাপ্লিকেশন বিকাশের সাথে কাজ শুরু করছি react-router। আমি ডেভ এবং প্রোড (রানটাইম) পরিবেশের জন্য প্রতিটি ওয়েবপ্যাক প্যাকেজের ভূমিকা সম্পর্কে খুব বিভ্রান্ত হয়ে যাচ্ছি।

এখানে আমার বোঝার সারসংক্ষেপ:

webpack: একটি প্যাকেজ, একটি ওয়েব অ্যাপ্লিকেশনের বিভিন্ন টুকরা একসাথে যোগদানের এবং একটি একক .js ফাইলে (সাধারণত bundle.js) বান্ডিল করার সরঞ্জাম । এরপরে ফলাফল ফাইলটি অ্যাপ্লিকেশন দ্বারা লোড হওয়ার জন্য একটি উন্নত পরিবেশে পরিবেশন করা হয় এবং কোড চালানোর জন্য সমস্ত প্রয়োজনীয় উপাদান রয়েছে। বৈশিষ্ট্যগুলির মধ্যে সঙ্কুচিত কোড, মিনিফাইং ইত্যাদি অন্তর্ভুক্ত রয়েছে Features

webpack-dev-server: এমন একটি প্যাকেজ যা ওয়েবসাইট ফাইলগুলি প্রক্রিয়া করার জন্য একটি সার্ভার সরবরাহ করে। এটি bundle.jsক্লায়েন্ট উপাদানগুলি থেকে একটি একক .js ফাইল ( ) তৈরি করে তবে মেমোরিতে এটি পরিবেশন করে। -hotকোডের পরিবর্তনের ক্ষেত্রে সমস্ত বিল্ডিং ফাইলগুলি নিরীক্ষণ এবং মেমরিতে একটি নতুন বান্ডিল তৈরির বিকল্পও রয়েছে ( )। সার্ভারটি সরাসরি ব্রাউজারে পরিবেশন করা হয় (উদা http:/localhost:8080/webpack-dev-server/whatever:)। মেমোরি লোডিং, হট প্রসেসিং এবং ব্রাউজার পরিবেশনার সংমিশ্রণটি যখন বিকাশের পরিবেশের জন্য আদর্শ কোড পরিবর্তন হয় তখন ব্যবহারকারী ব্রাউজারে অ্যাপ্লিকেশন আপডেট করতে দেয়।

উপরের পাঠ্য সম্পর্কে আমার যদি সন্দেহ থাকে তবে আমি নীচের সামগ্রীর বিষয়ে সত্যই নিশ্চিত নই, সুতরাং প্রয়োজনে দয়া করে আমাকে পরামর্শ দিন

একটি সাধারণ সমস্যা যখন ব্যবহার webpack-dev-serverসঙ্গে node/expressযে webpack-dev-serverএকটি সার্ভার হয়, হিসাবে node/express। এটি ক্লায়েন্ট এবং কিছু নোড / এক্সপ্রেস কোড (একটি এপিআই ইত্যাদি) উভয়ই চালানোর পক্ষে এই পরিবেশটিকে জটিল করে তোলে। দ্রষ্টব্য: আমি এটিকেই মুখোমুখি করেছি তবে তা আরও বিশদে কেন হয় তা বুঝতে পেরে ভাল লাগবে ...

webpack-dev-middleware: এটি একই webpack-dev-serverপদক্ষেপ (ইনমেমরি বান্ডিলিং, হট রিলোডিং) সহ মিডলওয়্যার , তবে বিন্যাসে যা server/expressঅ্যাপ্লিকেশনটিতে ইনজেকশনের ব্যবস্থা করা যেতে পারে । এইভাবে, আপনার webpack-dev-serverনোড সার্ভারের অভ্যন্তরীণ এক ধরণের সার্ভার রয়েছে the উফফ: এটা কি পাগল স্বপ্ন ??? কীভাবে এই টুকরাটি ডেভ এবং প্রোড সমীকরণকে সমাধান করতে পারে এবং জীবনকে সহজ করে তোলে

webpack-hot-middleware: এটি ... এখানে আটকে আছে ... এই টুকরোটি সন্ধানের সময় খুঁজে পেয়েছে webpack-dev-middleware... কীভাবে এটি ব্যবহার করবেন সে সম্পর্কে কোনও ধারণা নেই।

নোট: দুঃখিত যে কোনও ভুল ধারণা আছে। জটিল পরিবেশে এই রূপগুলি আনস্ট্যান্ডেড করার জন্য আমার সত্যই সহায়তা দরকার। যদি কনভেনিয়েন্ট হয় তবে দয়া করে আরও প্যাকেজ / ডেটা যুক্ত করুন যা পুরো পরিস্থিতি তৈরি করবে।


4
এখানে তালিকাভুক্ত প্যাকেজগুলির কোনওটিই উত্পাদনতে সার্ভার সাইডে ব্যবহার করা হয় না - সেগুলি কেবল বিকাশকারী সরঞ্জাম। আপনি নিজের কাস্টম ডেভলপমেন্ট সার্ভারটি লিখতে চাইলে আপনি webpack-dev-middleware(এবং সম্ভাব্য webpack-hot-middleware) ব্যবহার করবেন। নির্দিষ্ট বৈশিষ্ট্য না থাকলে আপনি চান webpack-dev-serverনা এটি আপনার কেবলমাত্র এটি ব্যবহার করা উচিত।
জো ক্লে

উত্তর:


122

webpack

যেমনটি আপনি বর্ণনা করেছেন, ওয়েবপ্যাকটি একটি মডিউল বান্ডেলার, এটি মূলত বিভিন্ন মডিউল ফর্ম্যাটগুলি বান্ডিল করে যাতে সেগুলি ব্রাউজারে চালানো যায়। এটি দুটি সিএলআই এবং নোড এপিআই সরবরাহ করে

webpack-dev-middleware

ওয়েবপ্যাক ডেভ মিডলওয়্যার মিডলওয়্যার যা বিকাশের সময় আপনার বান্ডেলের সর্বশেষ সংকলন পরিবেশন করতে এক্সপ্রেস সার্ভারে মাউন্ট করা যায় । এটি ওয়াচ মোডেwebpack নোড এপিআই ব্যবহার করে এবং ফাইল সিস্টেমে আউটপুট দেওয়ার পরিবর্তে এটি মেমরির বাইরে চলে যায়

তুলনার জন্য, আপনি express.staticউত্পাদন মধ্যে এই মিডওয়্যারের পরিবর্তে এর মতো কিছু ব্যবহার করতে পারেন ।

webpack-dev-server

ওয়েবপ্যাক ডেভ সার্ভার নিজেই একটি এক্সপ্রেস সার্ভার যা webpack-dev-middlewareসর্বশেষতম বান্ডিল পরিবেশন করতে ব্যবহার করে এবং অতিরিক্তভাবে ক্লায়েন্টের লাইভ মডিউল আপডেটের জন্য হট মডিউল রিপ্লেসমেন্ট (এইচএমআর) অনুরোধগুলি পরিচালনা করে।

webpack-hot-middleware

ওয়েবপ্যাক হট মিডলওয়্যার একটি বিকল্প webpack-dev-serverতবে এটি একটি সার্ভার নিজেই শুরু করার পরিবর্তে এটি আপনাকে বিদ্যমান / কাস্টম এক্সপ্রেস সার্ভারের পাশাপাশি মাউন্ট করার অনুমতি দেয় webpack-dev-middleware

এছাড়াও ...

webpack-hot-server-middleware

কেবল জিনিসগুলিকে আরও বিভ্রান্ত করার জন্য, ওয়েবপ্যাক হট সার্ভার মিডলওয়্যার রয়েছে যা পাশাপাশি ব্যবহার করার জন্য webpack-dev-middlewareএবং সার্ভারের রেন্ডারড webpack-hot-middlewareঅ্যাপ্লিকেশনগুলির হট মডিউল প্রতিস্থাপনের জন্য ডিজাইন করা হয়েছে।


4
ফ্রন্ট-এন্ড বনাম ব্যাক এন্ড গরম মডিউল প্রতিস্থাপন ভাঙ্গন সন্ধানে তাদের জন্য, দয়া করে এই পোস্টটি দেখুন: stackoverflow.com/questions/46086297/... Xlee প্রতিটি পাশ জন্য প্রয়োজনীয়তা ব্যাখ্যা একটি ভাল পেশা আছে - একটি পুনর্সূচনা প্রয়োজন সার্ভার সাইড , ফ্রন্ট-এন্ড আপডেট হওয়া জাভাস্ক্রিপ্ট বান্ডিলগুলিতে লোড করার অনুমতি দেয়।
অ্যাবেলিটো

9

2018 এর আপডেট হিসাবে এবং এর অফিসিয়াল গিটহাব পৃষ্ঠায় ওয়েবপ্যাক-ডেভ-সার্ভার নোটটি বিবেচনা করে :

রক্ষণাবেক্ষণের প্রকল্পটি দয়া করে মনে রাখবেন যে ওয়েবপ্যাক-ডেভ-সার্ভার বর্তমানে কেবল রক্ষণাবেক্ষণ-মোডে রয়েছে এবং অদূর মেয়াদে কোনও অতিরিক্ত বৈশিষ্ট্য গ্রহণ করবে না। এক্সপ্রেস মিডলওয়্যারের সাহায্যে বেশিরভাগ নতুন বৈশিষ্ট্য অনুরোধগুলি সম্পন্ন করা যায়; ডকুমেন্টেশনে হুকের আগে এবং পরে ব্যবহার করে দেখুন।

ওয়েবপ্যাক এইচএমআর তৈরির প্রাকৃতিক পছন্দটি কী হবে?


4
এটি আরও বলেছে Use webpack-serve for a fast alternative. Use webpack-dev-server if you need to test on old browsers.তাই আপনি ওয়েবপ্যাক-পরিবেশন চেষ্টা করতে পারেন
ব্রুস সূর্য

4
রক্ষণাবেক্ষণ নোটটি সরানো হয়েছে। সুতরাং আমি অনুমান করছি এটি আবার সুপারিশ করা হয় ??? এতো গুরুত্বপূর্ণ একটি ডিভ সরঞ্জামটির আশেপাশে এমন একটি ভয়ঙ্কর রক্ষণাবেক্ষণকারী দল রয়েছে Mad
ক্যাপ্টেন ফোগেটে

4
ওয়েবপ্যাক-পরিবেশনকে অবজ্ঞা করা হয়েছে এবং @ ক্যাপ্টেনফোগেটি বলেছেন যে রক্ষণাবেক্ষণ নোটটি আজকের মতো ওয়েবপ্যাক-ডেভ-সার্ভার থেকে অপসারণ করা হয়েছে
অনুপ ডি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.