“ publicPath” ใน Webpack ทำอะไร

250

สถานะเอกสาร Webpackที่output.publicPath:

output.pathจากมุมมองของจาวาสคริปต์

คุณช่วยอธิบายความหมายของสิ่งนี้ได้จริงไหม?

ฉันใช้output.pathและoutput.filenameเพื่อระบุตำแหน่งที่ Webpack ควรแสดงผลลัพธ์ แต่ฉันไม่แน่ใจว่าควรใส่อะไรoutput.publicPathและจำเป็นต้องใช้หรือไม่

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

javascript webpack

— Misha Moroshko
แหล่งที่มา

17

ฉันอยากจะเพิ่มคำถามนี้: คุณจะใช้pathเมื่อใดและจะใช้เมื่อpublicPathใด

— wmock

1

คำตอบอยู่ที่นี่: github.com/webpack/docs/wiki/configuration#outputpublicpath

— mqklin

หากมีความช่วยเหลือ: tomasalabes.me/blog/_site/web-development/2016/12/10/…

— Talabes

6

ใครบางคนในทีมนักพัฒนาควรตื่นขึ้นมา มีคนถามคำถามนี้มากมาย

— Royi Namir

ที่นี่มีเอกสารสำหรับ webpack2

— Eliran Malka

134

`output.path`

ไดเรกทอรีดิสก์ท้องถิ่นในการจัดเก็บไฟล์ที่ส่งออกทั้งหมดของคุณ(เส้นทางแอบโซลูท)

ตัวอย่าง: path.join(__dirname, "build/")

Webpack จะเอาท์พุททุกอย่างลงใน localdisk/path-to-your-project/build/

`output.publicPath`

ที่ที่คุณอัพโหลดไฟล์รวม (สัมพันธ์กับรูทเซิร์ฟเวอร์)

ตัวอย่าง: /assets/

http://server/สันนิษฐานว่าคุณใช้งานแอพพลิเคที่รากเซิร์ฟเวอร์

โดยใช้/assets/app ที่จะหาสินทรัพย์ webpack http://server/assets/ที่: ภายใต้ประทุนทุก URL ที่พบว่า webpack จะถูกเขียนใหม่เพื่อเริ่มต้นด้วย " /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)

— กฎหมายของเควิน
แหล่งที่มา

65

เมื่อดำเนินการในเบราว์เซอร์ webpack จำเป็นต้องทราบว่าคุณจะโฮสต์บันด์ที่สร้างขึ้นที่ไหน ดังนั้นจึงสามารถร้องขอชิ้นเพิ่มเติม (เมื่อใช้การแยกโค้ด ) หรือไฟล์อ้างอิงที่โหลดผ่านfile-loaderหรือurl-loaderตามลำดับ

ตัวอย่างเช่น: หากคุณกำหนดค่าเซิร์ฟเวอร์ http ของคุณให้โฮสต์บันเดิลที่สร้างขึ้นภายใต้/assets/คุณควรเขียน:publicPath: "/assets/"

— โยฮันเนสวาลด์
แหล่งที่มา

3

คุณช่วยบอกฉันหน่อยได้ไหมว่าโฟลเดอร์สินทรัพย์อยู่ที่ไหน? ฉันต้องการดูไฟล์ภายในโฟลเดอร์ทรัพย์สินขอบคุณ

— gauti

53

~~publicPath ใช้เพื่อจุดประสงค์ในการพัฒนาเท่านั้น~~ฉันสับสนในครั้งแรกที่ฉันเห็นคุณสมบัติการกำหนดค่านี้ แต่มันก็สมเหตุสมผลแล้วที่ฉันใช้ webpack มาระยะหนึ่งแล้ว

สมมติว่าคุณใส่แฟ้มทั้งหมด js ของคุณแหล่งที่มาภายใต้srcโฟลเดอร์และคุณปรับแต่ง webpack ของคุณเพื่อสร้างไฟล์ต้นทางไปยังโฟลเดอร์ที่มีdistoutput.path

แต่คุณต้องการที่จะให้บริการสินทรัพย์คงที่ของคุณภายใต้สถานที่ที่มีความหมายมากขึ้นเช่นwebroot/public/assetsเวลานี้คุณสามารถใช้out.publicPath='/webroot/public/assets'เพื่อที่ว่าใน html ของคุณคุณสามารถอ้างอิง js <script src="/webroot/public/assets/bundle.js"></script>ของคุณด้วย

เมื่อคุณร้องขอจะพบ js ภายใต้โฟลเดอร์อwebroot/public/assets/bundle.jswebpack-dev-server

ปรับปรุง:

ขอบคุณสำหรับ Charlie Martin เพื่อแก้ไขคำตอบของฉัน

Original: PublicPath ใช้เพื่อการพัฒนาเท่านั้นไม่ใช่เพื่อการพัฒนาเท่านั้น

ไม่ตัวเลือกนี้มีประโยชน์ในเซิร์ฟเวอร์ dev แต่เจตนาใช้สำหรับการโหลดบันเดิลสคริปต์แบบอะซิงโครนัสในการผลิต สมมติว่าคุณมีแอปพลิเคชันหน้าเดียวที่มีขนาดใหญ่มาก (เช่น Facebook) Facebook ไม่ต้องการให้บริการจาวาสคริปต์ทุกครั้งที่คุณโหลดหน้าแรกดังนั้นจึงให้บริการเฉพาะสิ่งที่จำเป็นในหน้าแรก จากนั้นเมื่อคุณไปที่โปรไฟล์ของคุณโหลด javascript เพิ่มเติมสำหรับหน้านั้นด้วย ajax ตัวเลือกนี้จะบอกตำแหน่งบนเซิร์ฟเวอร์ของคุณในการโหลดชุดข้อมูลนั้น

— ฌอน
แหล่งที่มา

1

มันไม่ได้มีไว้เพื่อการพัฒนาเท่านั้นคำตอบของ @jhnns อธิบายว่ามันมีผลกับโหลดเดอร์หรือไม่

— เหวิน

มันเหมือนกันใช่ไหม สถานที่ให้บริการนี้จะบอกโหลดของคุณและมิดเดิลแวร์ของคุณที่จะหาสินทรัพย์จริงหวังว่าคุณจะไม่ใช้ webpackmiddleware หรือ webpack-dev-server ในสภาพแวดล้อมการผลิตของคุณดังนั้นฉันคิดว่านี่เป็นเพียงสำหรับสภาพแวดล้อม dev โปรดดูwebpack.github .io / docs / webpack-dev-server.html

— Sean

1

จากwebpack.github.io/docs/configuration.html#output-publicpathนี้ดูเหมือนว่าตัวเลือกนี้จะบอกให้webpackกรอก URL หรือพา ธ ของสินทรัพย์ที่ถูกต้องในไฟล์ที่สร้างไม่ใช่แค่สำหรับมิดเดิลแวร์ เมื่อใช้เซิร์ฟเวอร์ dev ฉันคิดว่ามิดเดิลแวร์มีลักษณะที่publichPathจะขโมยคำขอและส่งคืนไฟล์ในหน่วยความจำ

— เหวิน

ในสภาพแวดล้อมการผลิตของคุณคุณจะใช้webpack -pในการสร้างสินทรัพย์ของคุณและสินทรัพย์ของคุณควรจะให้บริการโดยเซิร์ฟเวอร์แอปพลิเคชันของคุณหรือเซิร์ฟเวอร์ nginx ของคุณแทนเซิร์ฟเวอร์เว็บแพ็คหรือมิดเดิลแวร์ webpack ดังนั้นการกำหนดค่านี้จะไม่มีประโยชน์อีกต่อไป ?

— Sean

7

ไม่ตัวเลือกนี้มีประโยชน์ในเซิร์ฟเวอร์ dev แต่เจตนาใช้สำหรับการโหลดบันเดิลสคริปต์แบบอะซิงโครนัสในการผลิต สมมติว่าคุณมีแอปพลิเคชันหน้าเดียวที่มีขนาดใหญ่มาก (เช่น Facebook) Facebook ไม่ต้องการให้บริการจาวาสคริปต์ทุกครั้งที่คุณโหลดหน้าแรกดังนั้นจึงให้บริการเฉพาะสิ่งที่จำเป็นในหน้าแรก จากนั้นเมื่อคุณไปที่โปรไฟล์ของคุณโหลด javascript เพิ่มเติมสำหรับหน้านั้นด้วย ajax ตัวเลือกนี้จะบอกตำแหน่งที่เซิร์ฟเวอร์ของคุณจะโหลดชุดนั้นจาก

— Charlie Martin

19

คุณสามารถใช้ publicPath เพื่อชี้ไปยังตำแหน่งที่คุณต้องการให้ webpack-dev-server ให้บริการไฟล์ "เสมือน" ตัวเลือก publicPath จะเป็นตำแหน่งเดียวกันของตัวเลือก content-build สำหรับ webpack-dev-server webpack-dev-serverสร้างไฟล์เสมือนที่จะใช้เมื่อคุณเริ่มต้น ไฟล์เสมือนเหล่านี้มีลักษณะคล้ายกับไฟล์ที่สร้างขึ้นจริงซึ่ง webpack สร้างขึ้น โดยทั่วไปคุณจะต้องการตัวเลือก --content-base ให้ชี้ไปที่ไดเรกทอรี 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 ได้สร้างโฟลเดอร์สินทรัพย์เสมือนพร้อมกับไฟล์บันเดิล.jsเสมือนจริงที่อ้างถึง คุณสามารถทดสอบสิ่งนี้ได้โดยไปที่ localhost: 8080 / assets / bundle.js จากนั้นตรวจสอบใบสมัครของคุณสำหรับไฟล์เหล่านี้ มันจะถูกสร้างขึ้นเฉพาะเมื่อคุณเรียกใช้ webpack-dev-server

— Isaac Pak
แหล่งที่มา

เป็นคำอธิบายที่ดี แต่ถ้าฉันย้ายไปผลิตหรือสร้างด้วยมือ/build/bundle.jsฉันจะต้องเปลี่ยนไฟล์srcของฉันindex.htmlใช่ไหม

— ArchNoob

ขอโทษที่ตอบช้า. คุณไม่จำเป็นต้องเปลี่ยน src ไม่ว่าคุณจะอยู่ในการผลิตหรือการพัฒนา webpack จะสร้าง bundle.js ในเส้นทางผลลัพธ์ ในตัวอย่างข้างต้นมันจะเป็น / build/bundle.js

— Isaac Pak

ขอบคุณฉันถามเกี่ยวกับsrcบรรทัดในไฟล์ index.html ตอนนี้มันชี้ไป"assets/bundle.js"ถ้ามันย้ายไปผลิตมัดเป็นไปได้ใน"build/bundle.js"ดังนั้นฉันจะต้องมีการเปลี่ยนแปลงที่อยู่ในบรรทัด HTML src src="build/bundle.js"ไป หรือมีวิธีอัตโนมัติมากขึ้น?

— ArchNoob

2

ฉันเข้าใจคำถามของคุณแล้ว ใช่คุณจะต้องเปลี่ยน src เพื่อสร้าง / bundle.js เพื่อการผลิต สำหรับวิธีอัตโนมัติในการทำเช่นนี้ฉันไม่แน่ใจ ฉันเคยเห็นคนอื่นสร้างไฟล์ webpack.config.js 2 ไฟล์สำหรับการผลิตและอีกไฟล์สำหรับการพัฒนา อาจเป็นไปได้ว่าการใช้ (การผลิต ENV ===) ในทาง prgrammatically ... แต่ฉันไม่ได้ลอง

— Isaac Pak

@ArchNoob เพียงแค่ดูว่าฉันทำสิ่งนี้ในการผลิตอย่างไร ผมไม่ได้เปลี่ยนค่า src แต่แทนที่จะฉันเปลี่ยนแปลงมูลค่าที่ publicPath ของฉันจากไป/assets/ /buildวิธีนี้ฉันไม่ต้องเปลี่ยน index.html ฉันย้าย index.html ของฉันออกจากโฟลเดอร์บิลด์และไปที่รูทของแอปพลิเคชัน

— Isaac Pak

15

ในกรณีของฉันฉันมี cdn และฉันจะวางไฟล์คงการประมวลผลทั้งหมดของฉัน (js, imgs, แบบอักษร ... ) ลงใน cdn ของฉันสมมติว่า url คือhttp://my.cdn.com/

ดังนั้นหากมีไฟล์ js ซึ่งเป็น URL อ้างอิงดั้งเดิมใน html คือ './js/my.js' มันควรจะกลายเป็นhttp://my.cdn.com/js/my.jsในสภาพแวดล้อมการผลิต

ในกรณีนั้นสิ่งที่ฉันต้องทำคือเพียงตั้งค่า publicpath เท่ากับhttp://my.cdn.com/ และwebpack จะเพิ่มคำนำหน้านั้นโดยอัตโนมัติ

— เคนท์วู้ด
แหล่งที่มา

ดูเหมือนจะไม่เพิ่มคำนำหน้าใด ๆ ในกรณีของฉัน

— Param Singh

14

ชื่อไฟล์ระบุชื่อของไฟล์ที่รหัสรวมของคุณจะได้รับการสะสมหลังจากผ่านขั้นตอนการสร้าง

pathระบุไดเรกทอรีเอาต์พุตที่app.js (ชื่อไฟล์) กำลังจะถูกบันทึกไว้ในดิสก์ หากไม่มีไดเรกทอรีผลลัพธ์ webpack จะสร้างไดเรกทอรีนั้นให้คุณ ตัวอย่างเช่น:

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

นี้จะสร้างไดเรกทอรีMyProject / ตัวอย่าง / อและภายใต้ไดเรกทอรีที่จะสร้างapp.js , /myproject/examples/dist/app.js หลังการสร้างคุณสามารถเรียกดูmyproject / samples / dist / app.jsเพื่อดูรหัสที่รวมมา

publicPath: "ฉันควรจะใส่อะไรที่นี่"

publicPathระบุไดเรกทอรีเสมือนในเว็บเซิร์ฟเวอร์จากที่รวมไฟล์ app.js จะได้รับการให้บริการจาก โปรดจำไว้ว่าเซิร์ฟเวอร์คำเมื่อใช้ publicPath อาจเป็น webpack-dev-server หรือเซิร์ฟเวอร์ด่วนหรือเซิร์ฟเวอร์อื่น ๆ ที่คุณสามารถใช้กับ webpack ได้

ตัวอย่างเช่น

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

การกำหนดค่านี้บอกให้webpackรวมไฟล์ js ทั้งหมดของคุณไว้ในตัวอย่าง / dist / app.jsและเขียนลงในไฟล์นั้น

publicPathบอกwebpack -dev-server หรือเซิร์ฟเวอร์ด่วนเพื่อให้บริการไฟล์ที่รวมนี้เช่นexample / dist / app.jsจากตำแหน่งเสมือนที่ระบุในเซิร์ฟเวอร์เช่น / public / assets / js ดังนั้นในไฟล์ html ของคุณคุณต้องอ้างอิงไฟล์นี้เป็น

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

ดังนั้นโดยสรุป publicPath ก็เหมือนกับการจับคู่ระหว่างvirtual directoryในเซิร์ฟเวอร์ของคุณและoutput directoryระบุโดยการกำหนดค่าเอาท์พุทพา ธเมื่อใดก็ตามที่มีการร้องขอไฟล์พับลิก / asset / js / app.jsมาไฟล์/examples/dist/app.jsจะแสดง

— udeep shrestha
แหล่งที่มา

2

อธิบายได้ดี!

— Ganesh Pandey

3

เอกสารประกอบ webpack2 อธิบายสิ่งนี้ในวิธีที่สะอาดกว่ามาก: https://webpack.js.org/guides/public-path/#use-cases

webpack มีการกำหนดค่าที่มีประโยชน์อย่างมากซึ่งให้คุณระบุเส้นทางหลักสำหรับเนื้อหาทั้งหมดในแอปพลิเคชันของคุณ มันเรียกว่า publicPath

— อลัน
แหล่งที่มา

2

publicPath ถูกใช้โดย webpack สำหรับการแทนที่เส้นทางสัมพัทธ์ที่กำหนดไว้ใน css ของคุณสำหรับการอ้างอิงไฟล์รูปภาพและฟอนต์

— Khalid Azam
แหล่งที่มา