Webpack में "publicPath" क्या करता है?

Question

Webpack डॉक्स स्थिति है कि 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/configuration#outputpublicpath

— mqklin

यदि मदद करता है: tomasalabes.me/blog/_site/web-development/2016/12/10/…

— तालबा

उनकी देव टीम में किसी को जागना चाहिए। इस सवाल को बहुत से लोग पूछते हैं

— रॉय नामिर

यहाँ webpack2 के लिए डॉक्स हैं ।

— एलिरन मलका

Answer 1

output.path

आपकी सभी आउटपुट फ़ाइलों (निरपेक्ष पथ) को संग्रहीत करने के लिए स्थानीय डिस्क निर्देशिका ।

उदाहरण: path.join(__dirname, "build/")

वेबपैक सब कुछ आउटपुट करेगा localdisk/path-to-your-project/build/

---

output.publicPath

जहां आपने अपनी बंडल की गई फाइलें अपलोड की हैं (सर्वर रूट से संबंधित)

उदाहरण: /assets/

मान लिया कि आपने सर्वर रूट पर ऐप को तैनात किया है http://server/।

उपयोग करके /assets/, ऐप वेबपैक परिसंपत्तियों को यहां मिलेगा http://server/assets/:। हुड के तहत, हर एक यूआरएल जो वेबपैक मुठभेड़ों को फिर से लिखना शुरू कर देगा " /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

क्या आप मुझे बता सकते हैं कि संपत्ति फ़ोल्डर कहाँ स्थित है? मैं संपत्ति फ़ोल्डर के अंदर फाइलें देखना चाहता हूं धन्यवाद।

— गौती

Answer 3

जनतापथ का उपयोग सिर्फ देव उद्देश्य के लिए किया जाता है, मैं पहली बार उलझन में था जब मैंने इस विन्यास संपत्ति को देखा, लेकिन यह अब समझ में आता है कि मैंने थोड़ी देर के लिए वेबपैक का उपयोग किया है

मान लें कि आपने अपनी सभी js स्रोत फ़ाइल को srcफ़ोल्डर में रख दिया है , और आप स्रोत फ़ाइल को distफ़ोल्डर में बनाने के लिए अपने वेबपैक को कॉन्फ़िगर करते हैं output.path।

लेकिन आप अपनी स्थैतिक संपत्ति को अधिक सार्थक स्थान के तहत सेवा देना चाहते हैं webroot/public/assets, जैसे कि इस बार आप इसका उपयोग कर सकते हैं out.publicPath='/webroot/public/assets', ताकि आपके HTML में, आप अपने js के साथ संदर्भ ले सकें <script src="/webroot/public/assets/bundle.js"></script>।

जब आप अनुरोध webroot/public/assets/bundle.jsकरते webpack-dev-serverहैं कि डिस्ट फ़ोल्डर के तहत js मिल जाएगा

अपडेट करें:

मेरे जवाब को सही करने के लिए चार्ली मार्टिन का धन्यवाद

मूल: जनतापाठ सिर्फ देव उद्देश्य के लिए उपयोग किया जाता है, यह सिर्फ देव उद्देश्य के लिए नहीं है

नहीं, यह विकल्प देव सर्वर में उपयोगी है, लेकिन इसका उद्देश्य उत्पादन में अतुल्यकालिक रूप से स्क्रिप्ट बंडलों को लोड करना है। मान लें कि आपके पास एक बहुत बड़ा पेज एप्लिकेशन है (उदाहरण के लिए फेसबुक)। हर बार जब आप मुखपृष्ठ को लोड करते हैं, तो फेसबुक अपने सभी जावास्क्रिप्ट की सेवा नहीं करना चाहता है, इसलिए यह मुखपृष्ठ पर केवल व्हाट्सएप की जरूरत है। फिर, जब आप अपनी प्रोफ़ाइल पर जाते हैं, तो यह पेज के साथ कुछ और जावास्क्रिप्ट लोड करता है। यह विकल्प यह बताता है कि आपके सर्वर पर उस बंडल को कहां से लोड करना है

Comments

यह सिर्फ देव उद्देश्य के लिए नहीं है, @ jhnns का उत्तर बताता है कि यह लोडर आउटपुट को कैसे प्रभावित करता है।

— वेन

यह वही नहीं है? यह प्रॉपर्टी आपके लोडर, और आपके मिडलवेयर को बताती है कि असली संपत्ति कहां मिलेगी, उम्मीद है कि आप अपने प्रोडक्शन एनवायरमेंट में webpackmiddleware, या webpack-dev-server का उपयोग नहीं करेंगे, इसलिए मुझे लगता है कि यह सिर्फ देव एनवायरमेंट के

— सीन

इस webpack.github.io/docs/configuration.html#output-publicpath से ऐसा लगता है कि यह विकल्प वेबपैक को जनरेट की गई फ़ाइलों में सही url या संपत्तियों के पथ को भरने के लिए कहता है, न कि केवल बिचौलियों के लिए। देव सर्वर चलाते समय, मुझे लगता है कि मिडलवेयर publichPathअनुरोधों को हाईजैक करने के लिए देखता है और इन-मेमोरी फ़ाइलों को वापस करता है।

— वेन

वास्तव में, आपके उत्पादन पर्यावरण में, आप webpack -pअपनी परिसंपत्तियों का निर्माण करने के लिए उपयोग करेंगे , और आपकी परिसंपत्तियों को आपके एप्लिकेशन सर्वर या वेबपैक सर्वर या वेबपैक मिडलवेयर के बजाय आपके nginx सर्वर द्वारा सेवा दी जानी चाहिए, इसलिए यह कॉन्फ़िगरेशन अब उत्पादन वातावरण में उपयोगी नहीं है, क्या मैं सही हूं ?

— सीन

नहीं, यह विकल्प देव सर्वर में उपयोगी है, लेकिन इसका उद्देश्य उत्पादन में अतुल्यकालिक रूप से स्क्रिप्ट बंडलों को लोड करना है। मान लें कि आपके पास बहुत बड़ा सिंगल पेज एप्लिकेशन है (उदाहरण के लिए फेसबुक)। हर बार जब आप मुखपृष्ठ को लोड करते हैं, तो फेसबुक अपने सभी जावास्क्रिप्ट की सेवा नहीं करना चाहता है, इसलिए यह मुखपृष्ठ पर केवल व्हाट्सएप की जरूरत है। फिर, जब आप अपनी प्रोफ़ाइल पर जाते हैं, तो यह पेज के साथ कुछ और जावास्क्रिप्ट लोड करता है। यह विकल्प यह बताता है कि आपके सर्वर पर उस बंडल को कहां से लोड करना है

— चार्ली मार्टिन

Answer 4

आप उस स्थान पर इंगित करने के लिए publicPath का उपयोग कर सकते हैं जहाँ आप अपनी "वर्चुअल" फ़ाइलों की सेवा के लिए webpack-dev-server चाहते हैं। PublicPath विकल्प वेबपैक-देव-सर्वर के लिए सामग्री-निर्माण विकल्प का एक ही स्थान होगा। webpack-dev-server वर्चुअल फाइल्स बनाता है जिसे आप इसे शुरू करते समय इस्तेमाल करेंगे। ये वर्चुअल फाइलें वेब बंडल बनाई गई वास्तविक बंडल फाइलों से मिलती जुलती हैं। मूल रूप से आप चाहते हैं --content- आधार विकल्प निर्देशिका को इंगित करने के लिए आपके index.html में है। यहाँ एक उदाहरण सेटअप है:

//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 

webpack-dev-server ने वर्चुअल बंडल के साथ वर्चुअल एसेट फोल्डर बनाया है। आप लोकलहोस्ट: 8080 / एसेट्स / बंडल.जेएस पर जाकर इसका परीक्षण कर सकते हैं और फिर इन फाइलों के लिए अपने आवेदन में देख सकते हैं। वे केवल तभी उत्पन्न होते हैं जब आप वेबपैक-देव-सर्वर चलाते हैं।

Comments

इस तरह की एक अच्छी व्याख्या, लेकिन फिर अगर मैं उत्पादन के लिए कदम बढ़ाता /build/bundle.jsहूं या हाथ से निर्माण करता हूं तो मुझे srcअपनी index.htmlफाइल में सही बदलाव करना होगा?

— आर्कनोबो

देरी से जवाब देने के लिए माफी। आपको src को बदलना नहीं है। चाहे आपका उत्पादन हो या विकास, वेबपैक आउटपुट पथ में एक बंडल बना देगा। उपरोक्त उदाहरण में यह /build/bundle.js होगा।

— इसहाक पाक

धन्यवाद, मैं srcindex.html फ़ाइल में लाइन के बारे में पूछ रहा हूँ । अभी यह इशारा कर रहा है "assets/bundle.js"कि क्या यह उत्पादन करने के लिए कदम रखता है बंडल में होने जा रहा है "build/bundle.js"तो मुझे इसे बदलने के लिए HTML html में बदलना होगा src="build/bundle.js"। या कोई और अधिक स्वचालित तरीका है?

— आर्कनोब

मैं अब आपके प्रश्न को समझता हूं। हाँ, आपको निर्माण के लिए / बंडल बनाने के लिए src को बदलना होगा। ऐसा करने के लिए एक स्वचालित तरीके के रूप में, मुझे यकीन नहीं है। मैंने दूसरों को 2 विभिन्न वेबपैक .config.js फाइलें बनाते हुए देखा है, एक उत्पादन के लिए और एक विकास के लिए। वहाँ शायद एक तरीका है prgrammatically अगर (ENV === उत्पादन) ऐसा करते हैं ... लेकिन मैंने कोशिश नहीं की है।

— इसहाक पाक

@ArchNoob अब मैं उत्पादन में यह कैसे कर रहा हूँ, इस पर एक सिर। मैं src मूल्य परिवर्तन नहीं किया, लेकिन इसके बजाय मैं से मेरी publicPath मूल्य बदल /assets/करने के लिए /build। इस तरह मुझे अपना index.html नहीं बदलना पड़ेगा। मैंने अपने index.html को बिल्ड फ़ोल्डर से बाहर और एप्लिकेशन के रूट में स्थानांतरित कर दिया।

— इसहाक पाक

Answer 5

मेरे मामले में, मेरे पास एक सीडीएन है, और मैं अपने सभी संसाधित स्थिर फाइलों (जेएस, इमग, फोंट ...) को अपने सीडीएन में रखने जा रहा हूं, मान लीजिए कि यूआरएल है http://my.cdn.com/

इसलिए अगर कोई js फाइल है जो html में ओरिजनल रेफ़रल url है './js/my.js' तो प्रोडक्शन के माहौल में इसे http://my.cdn.com/js/my.js बन जाना चाहिए।

उस स्थिति में, मुझे जो करने की ज़रूरत है वह है बस publicpath सेट किया गया है http://my.cdn.com/ और webpack अपने आप उस उपसर्ग को जोड़ देगा

Comments

यह मेरे मामले में किसी भी उपसर्ग को जोड़ने के लिए प्रतीत नहीं होता है।

— परम सिंह

Answer 6

फ़ाइल नाम फ़ाइल के नाम को निर्दिष्ट करता है जिसमें बिल्ड चरण में जाने के बाद आपका सभी बंडल कोड जमा होने वाला है।

पथ आउटपुट डायरेक्टरी को निर्दिष्ट करता है जहाँ app.js (फ़ाइल नाम) डिस्क में सहेजा जा रहा है। यदि कोई आउटपुट निर्देशिका नहीं है, तो वेबपैक आपके लिए उस निर्देशिका को बनाने जा रहा है। उदाहरण के लिए:

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

यह एक निर्देशिका myproject / उदाहरण / dist पैदा करेगा और उस निर्देशिका के तहत यह app.js , /myproject/examples/dist/app.js बनाता है । निर्माण के बाद, आप बंधे हुए कोड को देखने के लिए myproject / उदाहरण / dist / app.js पर ब्राउज़ कर सकते हैं

जनतापथ: "मुझे यहां क्या करना चाहिए?"

publicPath वेब निर्देशिका में वर्चुअल निर्देशिका को निर्दिष्ट करता है जहाँ से बंडल की गई फ़ाइल, app.js से सेवा प्राप्त की जा रही है। ध्यान रखें, सार्वजनिक सर्वर का उपयोग करते समय शब्द सर्वर या तो वेबपैक-देव-सर्वर या एक्सप्रेस सर्वर या अन्य सर्वर हो सकता है जिसे आप वेबपैक के साथ उपयोग कर सकते हैं।

उदाहरण के लिए

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

यह कॉन्फ़िगरेशन वेबपैक को आपकी सभी js फ़ाइलों को उदाहरण / dist / app.js में बंडल करने और उस फ़ाइल में लिखने के लिए कहता है ।

publicPath वेब बंडल-सर्वर या एक्सप्रेस सर्वर को इस बंडल्ड फ़ाइल की सेवा देने के लिए कहता है अर्थात सर्वर / सार्वजनिक / संपत्ति / js में निर्दिष्ट वर्चुअल स्थान से उदाहरण / dist / app.js। तो अपनी html फ़ाइल में, आपको इस फ़ाइल को इस रूप में संदर्भित करना होगा

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

तो संक्षेप में, publicPath virtual directoryआपके सर्वर के बीच मैपिंग की तरह है और आउटपुट output directoryद्वारा निर्दिष्ट है। path कॉन्फ़िगरेशन, जब भी फ़ाइल के लिए अनुरोध सार्वजनिक / संपत्ति / js / app.js आता है, /examples/dist/app.js फ़ाइल सेवा की जाएगी।

Comments

अच्छी तरह से समझाया!

— गणेश पांडेय

Answer 7

Webpack2 प्रलेखन इसे बहुत साफ तरीके से समझाता है: https://webpack.js.org/guides/public-path/#use-cases

वेबपैक में एक अत्यधिक उपयोगी विन्यास है जो आपको अपने आवेदन पर सभी संपत्तियों के लिए आधार पथ निर्दिष्ट करने देता है। इसे सार्वजनिकपथ कहा जाता है।

Answer 8

publicPath का उपयोग वेबपैक द्वारा छवि और फ़ॉन्ट फ़ाइल को संदर्भित करने के लिए आपके css में परिभाषित सापेक्ष पथ को बदलने के लिए किया जाता है।