ওয়েবপ্যাকের "পাবলিকপথ" কী করে?

Question

ওয়েবপ্যাক ডক্সটি জানিয়েছে যে output.publicPath:

output.pathজাভাস্ক্রিপ্ট দৃশ্যে থেকে।

আপনি কি দয়া করে এর প্রকৃত অর্থটি ব্যাখ্যা করতে পারেন?

ওয়েবপ্যাকের ফলাফল কোথায় আউটপুট করা উচিত তা আমি ব্যবহার করেছি output.pathএবং output.filenameতা নির্দিষ্ট করেছিলাম, তবে কী লাগাতে output.publicPathহবে এবং এটি প্রয়োজনীয় কিনা তা আমি নিশ্চিত নই ।

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: "What should I put here?"   
  } 
}

Comments

আমি এই প্রশ্নে যুক্ত করতে চাই: আপনি কখন ব্যবহার করবেন pathএবং কখন ব্যবহার করবেন publicPath?

— wmock

উত্তরটি এখানে: github.com/webpack/docs/wiki/configration#outputpublicpath

— mqklin

যদি সহায়তা করে: tomasalabes.me/blog/_site/web-de

— વિકાસ

তাদের দেব দলের কেউ যেন জেগে থাকে। তাই অনেকে এই প্রশ্নটি জিজ্ঞাসা করেন

— রয়ী নমির

এখানে ওয়েবপ্যাক 2 এর জন্য ডকস রয়েছে ।

— এলিরান মালকা

Answer 1

output.path

স্থানীয় ডিস্কের ডিরেক্টরি আপনার সব আউটপুট ফাইল সংরক্ষণ করতে (পূর্ণ পথ) ।

উদাহরণ: path.join(__dirname, "build/")

ওয়েবপ্যাক সবকিছু আউটপুট হবে localdisk/path-to-your-project/build/

---

output.publicPath

যেখানে আপনি আপনার বান্ডিল ফাইলগুলি আপলোড করেছেন। (সার্ভার রুটের সাথে সম্পর্কিত)

উদাহরণ: /assets/

ধরে নেওয়া হয়েছে আপনি সার্ভারের মূলটিতে অ্যাপটি স্থাপন করেছেন http://server/।

ব্যবহারের /assets/, অ্যাপ্লিকেশন এ সম্পদ webpack পাবেন: http://server/assets/। হুডের অধীনে, ওয়েবপ্যাকের মুখোমুখি প্রতিটি url " /assets/" দিয়ে শুরু করতে পুনরায় লেখা হবে ।

src="picture.jpg" পুনরায় লিখেছেন ➡ src="/assets/picture.jpg"

অ্যাক্সেস করেছেন: ( http://server/assets/picture.jpg)

---

src="/img/picture.jpg" পুনরায় লিখেছেন ➡ src="/assets/img/picture.jpg"

অ্যাক্সেস করেছেন: ( http://server/assets/img/picture.jpg)

Answer 2

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

উদাহরণস্বরূপ: আপনি যদি নিজের HTTP সার্ভারটি উত্পন্ন বান্ডিলটি হোস্ট করার জন্য কনফিগার করেন তবে আপনার /assets/লিখতে হবে:publicPath: "/assets/"

Comments

আপনি কি আমাকে বলতে পারেন সম্পত্তি ফোল্ডারটি কোথায় অবস্থিত? আমি সম্পদ ফোল্ডারের ভিতরে থাকা ফাইলগুলি দেখতে চাই Thanks

— gauti

Answer 3

পাবলিকপথটি স্রেফ দেব উদ্দেশ্যে ব্যবহৃত হয়, আমি এই কনফিগার সম্পত্তিটি প্রথম দেখেছি দেখে আমি বিভ্রান্ত হয়ে পড়েছিলাম, তবে এটি এখন বোঝা যায় যে আমি কিছুক্ষণ ওয়েবপ্যাকটি ব্যবহার করেছি

ধরুন আপনি আপনার সমস্ত srcজেএস উত্স ফাইলটি ফোল্ডারের নীচে রেখেছেন এবং উত্স ফাইলটি distফোল্ডারে তৈরি করতে আপনি আপনার ওয়েবপ্যাকটি কনফিগার করেছেন output.path।

তবে আপনি আপনার স্থিতিশীল সম্পদগুলিকে আরও অর্থবহ অবস্থানের মতো পরিবেশন করতে চান যেমন এবার webroot/public/assetsআপনি ব্যবহার করতে পারেন out.publicPath='/webroot/public/assets', যাতে আপনার এইচটিএমএলতে আপনি আপনার জেএসের সাথে রেফারেন্স করতে পারেন <script src="/webroot/public/assets/bundle.js"></script>।

আপনি যে অনুরোধ যখন Dist ফোল্ডারের অধীনে JS পাবেনwebroot/public/assets/bundle.jswebpack-dev-server

হালনাগাদ:

চার্লি মার্টিন আমার উত্তরটি সংশোধন করার জন্য ধন্যবাদ

আসল: পাবলিকপথটি কেবলমাত্র দেব উদ্দেশ্য জন্য ব্যবহৃত হয়, এটি কেবলমাত্র দেব উদ্দেশ্য জন্য নয়

না, এই বিকল্পটি ডেভ সার্ভারে কার্যকর, তবে এর উদ্দেশ্য হ'ল উত্পাদনে স্ক্রিপ্ট বান্ডিলগুলি অবিচ্ছিন্নভাবে লোড করা। বলুন আপনার একটি খুব বড় একক পৃষ্ঠার অ্যাপ্লিকেশন রয়েছে (উদাহরণস্বরূপ ফেসবুক)। আপনি প্রতিবার হোমপৃষ্ঠাটি লোড করার সময় ফেসবুক তার সমস্ত জাভাস্ক্রিপ্ট পরিবেশন করতে চাইবে না, তাই এটি হোমপৃষ্ঠায় যা প্রয়োজন কেবল তা পরিবেশন করে। তারপরে, আপনি যখন আপনার প্রোফাইলে যান, তখন এটি অজ্যাক্স সহ পৃষ্ঠাটির জন্য আরও কিছু জাভাস্ক্রিপ্ট লোড করে। এই বিকল্পটি এটি জানায় যে আপনার সার্ভারে কোথা থেকে সেই বান্ডিলটি লোড করতে হবে

Comments

এটি কেবল দেব উদ্দেশ্যে নয়, @ jhnns এর উত্তর ব্যাখ্যা করে যে এটি কীভাবে লোডার আউটপুটগুলিকে প্রভাবিত করে।

— ওয়েন

এটা কি তাই না? এই সম্পত্তিটি আপনার লোডারকে এবং আপনার মিডলওয়্যারগুলিকে সত্যিকারের সম্পদগুলি কোথায় পাবেন তা বলে, আশা করি আপনি আপনার উত্পাদন পরিবেশে ওয়েবপ্যাকমিডওয়্যার, বা ওয়েবপ্যাক-ডেভ-সার্ভার ব্যবহার করবেন না, তাই আমি মনে করি এটি কেবল দেব পরিবেশের জন্য, দয়া করে ওয়েবপ্যাক.github দেখুন .io / ডক্স / ওয়েবপ্যাক-ডেভ-সার্ভার html

— শান

এই ওয়েবপ্যাক.github.io/docs/configration.html#output-publicpath থেকে মনে হচ্ছে এই বিকল্পটি ওয়েবপ্যাককে কেবল মিডলওয়্যারের জন্য নয়, উত্পন্ন ফাইলগুলিতে সম্পদের সঠিক URL বা পূরণ করার জন্য বলে। ডেভ সার্ভার চালানোর সময়, আমি মনে করি মিডলওয়্যার publichPathঅনুরোধগুলি হাইজ্যাক করে এবং ইন-মেমরি ফাইলগুলি ফিরিয়ে দেয়।

— ওয়েন

ঠিক যেমন, আপনার উত্পাদনের পরিবেশে, আপনার webpack -pনিজের সম্পদ তৈরি করতে ব্যবহৃত হবে , এবং আপনার সম্পদগুলি ওয়েব অ্যাপ্লিকেশন সার্ভার বা ওয়েবপ্যাক মিডলওয়্যারের পরিবর্তে আপনার অ্যাপ্লিকেশন সার্ভার বা আপনার এনজিএনএক্স সার্ভারের দ্বারা পরিবেশন করা উচিত, তাই এই কনফিগারেশনটি আর পরিবেশের পরিবেশে কার্যকর হবে না, আমি কি ঠিক আছি? ?

— শান

না, এই বিকল্পটি ডেভ সার্ভারে কার্যকর, তবে এর উদ্দেশ্য হ'ল উত্পাদনে স্ক্রিপ্ট বান্ডিলগুলি অবিচ্ছিন্নভাবে লোড করা। বলুন আপনার একটি খুব বড় একক পৃষ্ঠার অ্যাপ্লিকেশন রয়েছে (উদাহরণস্বরূপ ফেসবুক)। আপনি প্রতিবার হোমপৃষ্ঠাটি লোড করার সময় ফেসবুক তার সমস্ত জাভাস্ক্রিপ্ট পরিবেশন করতে চাইবে না, তাই এটি হোমপৃষ্ঠায় যা প্রয়োজন কেবল তা পরিবেশন করে। তারপরে, আপনি যখন আপনার প্রোফাইলে যান, তখন এটি অজ্যাক্স সহ পৃষ্ঠাটির জন্য আরও কিছু জাভাস্ক্রিপ্ট লোড করে। এই বিকল্পটি এটি জানায় যে আপনার সার্ভারে কোথায় সেই বান্ডিলটি লোড করা যায়

— চার্লি মার্টিন

Answer 4

আপনি যেখানে ওয়েবপ্যাক-ডেভ-সার্ভারটি তার "ভার্চুয়াল" ফাইলগুলি পরিবেশন করতে চান সেই অবস্থানটি নির্দেশ করতে আপনি পাবলিকপথ ব্যবহার করতে পারেন। পাবলিকপথ বিকল্পটি ওয়েবপ্যাক-ডেভ-সার্ভারের জন্য সামগ্রী তৈরির বিকল্পের একই অবস্থান হবে। ওয়েবপ্যাক-ডেভ-সার্ভার ভার্চুয়াল ফাইলগুলি তৈরি করে যা এটি শুরু করার সময় এটি ব্যবহার করবে। এই ভার্চুয়াল ফাইলগুলি প্রকৃত বান্ডিলযুক্ত ফাইলগুলির ওয়েবপ্যাকের অনুরূপ। মূলত আপনি চাইবেন - কনটেন্ট-বেস বিকল্পটি আপনার সূচকটি। Html যে ডিরেক্টরিতে রয়েছে তার দিকে নির্দেশ করুন Here এখানে একটি উদাহরণ সেটআপ করা হল:

//application directory structure
/app/
/build/
/build/index.html
/webpack.config.js


//webpack.config.js
var path = require("path");
module.exports = {
...
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    filename: "bundle.js"
  }
};  


//index.html
<!DOCTYPE>
<html>
...
<script src="assets/bundle.js"></script>
</html>

//starting a webpack-dev-server from the command line
$ webpack-dev-server --content-base build 

ওয়েবপ্যাক-ডেভ-সার্ভার একটি ভার্চুয়াল bundle.js ফাইলের সাথে একটি ভার্চুয়াল সম্পদ ফোল্ডার তৈরি করেছে যা এটি উল্লেখ করে। আপনি লোকালহোস্ট: 8080 / সম্পদ / বান্ডেল.জেএস এ গিয়ে এই ফাইলগুলি পরীক্ষা করে দেখতে পারেন। আপনি কেবল ওয়েবপ্যাক-ডেভ সার্ভার চালালে এগুলি উত্পন্ন হয়।

Comments

এরকম একটি ভাল ব্যাখ্যা, তবে তারপরে আমি যদি প্রোডাকশনে চলে যাই বা হাতে হাতে বিল্ড তৈরি /build/bundle.jsকরি তবে srcআমার index.htmlফাইলটিতে ডানটি পরিবর্তন করতে হবে ?

— আর্চনুব

বিলম্বিত প্রতুত্তরের জন্য দুঃখিত। আপনাকে এসসিআর পরিবর্তন করতে হবে না। আপনার উত্পাদন বা বিকাশের ক্ষেত্রেই হোক, ওয়েবপ্যাক আউটপুট পথে একটি বান্ডিল.জেএস তৈরি করবে। উপরের উদাহরণে এটি / বিল্ড / বিল্ডেল.জেএস হবে।

— আইজাক পাক

আপনাকে ধন্যবাদ, আমি সূচক srchtml ফাইলের লাইনটি সম্পর্কে জিজ্ঞাসা করছি । এই মুহুর্তে এটি নির্দেশ করছে "assets/bundle.js"যে এটি বান্ডেলটি প্রোডাকশনে চলে আসে "build/bundle.js"তাই আমাকে এইচটিএমএল এসসিআর লাইনে পরিবর্তন করতে হবে src="build/bundle.js"। নাকি আরও বেশি স্বয়ংক্রিয় উপায় আছে?

— আর্চনুব

আমি এখন আপনার প্রশ্ন বুঝতে। হ্যাঁ উত্পাদনের জন্য আপনাকে বিল্ডিং / বান্ডেল.জেএস তৈরি করতে src পরিবর্তন করতে হবে। এটি করার জন্য একটি স্বয়ংক্রিয় পদ্ধতি হিসাবে, আমি নিশ্চিত নই। আমি অন্যদের 2 টি ভিন্ন ওয়েবপ্যাক.কনফিগ.জেএস ফাইলগুলি তৈরি করতে দেখেছি, একটি উত্পাদনের জন্য এবং একটি উন্নয়নের জন্য। প্রাগ্র্যাম্যাটিকভাবে সম্ভবত এমন কোনও উপায় রয়েছে যেমন (ENV === উত্পাদন) এটি করে ... তবে আমি এটি চেষ্টা করি নি।

— ইসহাক পাক

@ আর্চনুব এখন কীভাবে প্রযোজনায় এটি করছি তা নিয়ে মাথা তুলে দেখুন। আমি src মান পরিবর্তন করা হয়নি কিন্তু এর পরিবর্তে আমি আমার publicPath মান পরিবর্তন /assets/করতে /build। এইভাবে আমাকে আমার সূচক html পরিবর্তন করতে হবে না। আমি আমার ইনডেক্স এইচটিএমএলটিকে বিল্ড ফোল্ডারের বাইরে এবং অ্যাপ্লিকেশনটির মূলের মধ্যেও স্থানান্তরিত করেছি।

— আইজাক পাক

Answer 5

আমার ক্ষেত্রে, আমার একটি সিডিএন রয়েছে এবং আমি আমার সিডনিতে আমার সমস্ত প্রক্রিয়াজাত স্ট্যাটিক ফাইল (জেএস, আইএমজি, ফন্ট ...) স্থাপন করতে চলেছি, ধরুন ইউআরএলটি http://my.cdn.com/

সুতরাং যদি কোনও জেএস ফাইল থাকে যা এইচটিএমএল-এর অরজিনাল রেফারেন্স ইউআরএল './js/my.js' হয় তবে এটি উত্পাদন পরিবেশে http://my.cdn.com/js/my.js হওয়া উচিত

সেক্ষেত্রে আমার যা করা দরকার তা হ'ল পাবলিকপথের সমান সেট করা হয়েছে http://my.cdn.com/ এবং ওয়েবপ্যাকটি স্বয়ংক্রিয়ভাবে সেই উপসর্গ যুক্ত করবে

Comments

এটি আমার ক্ষেত্রে কোনও উপসর্গ যোগ করার জন্য মনে হয় না।

— পরম সিং

Answer 6

ফাইলের নাম ফাইলের নাম নির্দিষ্ট করে যেখানে আপনার সমস্ত বান্ডিল কোড বিল্ড স্টেপ পরে যাওয়ার পরে জমা হতে চলেছে।

পাথ আউটপুট ডিরেক্টরিটি নির্দিষ্ট করে যেখানে অ্যাপ্লিকেশন । js (ফাইলের নাম) ডিস্কে সংরক্ষণ করতে চলেছে। যদি কোনও আউটপুট ডিরেক্টরি না থাকে তবে ওয়েবপ্যাকটি আপনার জন্য সেই ডিরেক্টরি তৈরি করতে চলেছে। উদাহরণ স্বরূপ:

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js"
  } 
}

এই ডিরেক্টরির তৈরি করবে myproject / উদাহরণ / Dist এবং যে ডিরেক্টরি নীচে সৃষ্টি app.js , /myproject/examples/dist/app.js । বিল্ডিংয়ের পরে, বান্ডিল কোডটি দেখতে আপনি মাইপ্রজেক্ট / উদাহরণ / ডিস্ট / অ্যাপ.জেজে ব্রাউজ করতে পারেন

পাবলিকপথ: "আমার এখানে কী রাখা উচিত?"

পাবলিকপথ ওয়েব সার্ভারে ভার্চুয়াল ডিরেক্টরিটি নির্দিষ্ট করে যেখানে থেকে বান্ডিল করা ফাইল, অ্যাপ.জেসগুলি সেখান থেকে পরিবেশন করতে চলেছে। মনে রাখবেন, পাবলিকপথ ব্যবহার করার সময় সার্ভার শব্দটি ওয়েবপ্যাক-ডেভ-সার্ভার বা এক্সপ্রেস সার্ভার বা অন্য সার্ভার হতে পারে যা আপনি ওয়েবপ্যাকের সাহায্যে ব্যবহার করতে পারেন।

উদাহরণ স্বরূপ

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: path.resolve("/public/assets/js")   
  } 
}

এই কনফিগারেশনটি ওয়েবপ্যাককে আপনার সমস্ত জেএস ফাইলগুলিকে উদাহরণ / ডিস / অ্যাপ.জেজে বান্ডিল করতে এবং সেই ফাইলটিতে লিখতে বলে।

পাবলিকপথ ওয়েব-প্যাক-ডেভ-সার্ভার বা এক্সপ্রেস সার্ভারকে এই বান্ডিল ফাইল যেমন উদাহরণ / ডিস / অ্যাপ.জেএস সার্ভারের নির্দিষ্ট ভার্চুয়াল অবস্থান থেকে / পাবলিক / সম্পদ / জেএস পরিবেশন করতে বলে tells সুতরাং আপনার এইচটিএমএল ফাইলে আপনাকে এই ফাইলটি হিসাবে উল্লেখ করতে হবে

<script src="public/assets/js/app.js"></script>

সুতরাং সংক্ষেপে, পাবলিকপথটি virtual directoryআপনার সার্ভারের মধ্যে ম্যাপিংয়ের মতো এবং output directoryআউটপুট.পথ কনফিগারেশন দ্বারা নির্দিষ্ট করা হয়, যখনই ফাইল / পাবলিক / সম্পদ / জেএস / অ্যাপ.জেএস ফাইলের জন্য অনুরোধ আসে, /example/dist/app.js ফাইল পরিবেশন করা হবে

Comments

ভাল ব্যাখ্যা!

— গণেশ পান্ডে

Answer 7

ওয়েবপ্যাক ২ ডকুমেন্টেশন এটিকে আরও পরিষ্কার উপায়ে ব্যাখ্যা করে: https://webpack.js.org/guides/public-path/#use-cases

ওয়েবপ্যাকের একটি অত্যন্ত দরকারী কনফিগারেশন রয়েছে যা আপনাকে আপনার অ্যাপ্লিকেশনটিতে থাকা সমস্ত সম্পদের জন্য বেস পাথটি নির্দিষ্ট করতে দেয়। একে পাবলিকপথ বলে।

Answer 8

পাবলিকপথ আপনার সিএসএসে সংজ্ঞাযুক্ত চিত্র এবং ফন্ট ফাইলের জন্য সংজ্ঞায়িত পথ প্রতিস্থাপনের জন্য ওয়েবপ্যাক দ্বারা ব্যবহৃত হয়।