Những gì mà public publicPath xông trong Webpack làm gì?

250

Webpack docs trạng thái đó output.publicPathlà:

Các output.pathtừ quan điểm của JavaScript.

Bạn có thể vui lòng giải thích về điều này thực sự có nghĩa là gì?

Tôi sử dụng output.pathvà output.filenamechỉ định nơi Webpack sẽ đưa ra kết quả, nhưng tôi không chắc nên đặt cái gì vào output.publicPathvà liệu nó có bắt buộc không.

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: "What should I put here?"   
  } 
}
javascript  webpack 
— Misha Moroshko
nguồn
17
Tôi muốn thêm vào câu hỏi này: khi nào bạn sẽ sử dụng pathvà khi nào bạn sẽ sử dụng publicPath?
— wmock
1
— mqklin
— Talabes
6
Ai đó trong nhóm dev của họ nên thức dậy. Vì vậy, nhiều người hỏi câu hỏi này
— Royi Namir
— Eliran Malka

Câu trả lời:

133

output.path

Thư mục đĩa cục bộ để lưu trữ tất cả các tệp đầu ra của bạn (Đường dẫn tuyệt đối) .

Thí dụ: path.join(__dirname, "build/")

Webpack sẽ xuất mọi thứ vào localdisk/path-to-your-project/build/

output.publicPath

Nơi bạn đã tải lên các tập tin đi kèm của bạn. (Liên quan đến root máy chủ)

Thí dụ: /assets/

Giả sử bạn đã triển khai ứng dụng tại máy chủ gốc http://server/.

Bằng cách sử dụng /assets/, ứng dụng sẽ tìm thấy các tài sản webpack tại : http://server/assets/. Dưới mui xe, mọi url mà webpack gặp phải sẽ được viết lại để bắt đầu bằng " /assets/".

src="picture.jpg" Viết lại src="/assets/picture.jpg"

Truy cập bởi: ( http://server/assets/picture.jpg)

src="/img/picture.jpg" Viết lại src="/assets/img/picture.jpg"

Truy cập bởi: ( http://server/assets/img/picture.jpg)

— Luật Kevin
nguồn
65

Khi được thực thi trong trình duyệt, webpack cần biết nơi bạn sẽ lưu trữ gói được tạo. Do đó, nó có thể yêu cầu các đoạn bổ sung (khi sử dụng phân tách mã ) hoặc các tệp được tham chiếu được tải thông qua trình tải tệp hoặc trình tải url tương ứng.

Ví dụ: Nếu bạn định cấu hình máy chủ http của mình để lưu trữ gói được tạo bên dưới, /assets/bạn nên viết:publicPath: "/assets/"

— Julian Ewald
nguồn
3
Bạn có thể vui lòng cho tôi biết thư mục tài sản nằm ở đâu không? Tôi muốn xem các tập tin trong thư mục tài sản Cảm ơn.
— gauti
53

publicPath chỉ được sử dụng cho mục đích dev, Tôi đã bối rối khi lần đầu tiên tôi thấy thuộc tính cấu hình này, nhưng có nghĩa là bây giờ tôi đã sử dụng webpack trong một thời gian

giả sử bạn đặt tất cả tệp nguồn js của mình vào srcthư mục và bạn định cấu hình gói web của mình để tạo tệp nguồn vào distthư mục output.path.

Nhưng bạn muốn phân phát tài sản tĩnh của mình dưới một vị trí có ý nghĩa hơn webroot/public/assets, lần này bạn có thể sử dụng out.publicPath='/webroot/public/assets', để trong html của bạn, bạn có thể tham chiếu js của mình với <script src="/webroot/public/assets/bundle.js"></script>.

khi bạn yêu cầu webroot/public/assets/bundle.jscác webpack-dev-serversẽ tìm thấy js trong thư mục TP

Cập nhật:

cảm ơn vì Charlie Martin đã sửa câu trả lời của tôi

nguyên bản: publicPath chỉ được sử dụng cho mục đích dev, đây không chỉ dành cho mục đích dev

Không, tùy chọn này hữu ích trong máy chủ dev, nhưng mục đích của nó là tải các gói script không đồng bộ trong sản xuất. Giả sử bạn có một ứng dụng trang đơn rất lớn (ví dụ Facebook). Facebook sẽ không muốn phục vụ tất cả các javascript của mình mỗi khi bạn tải trang chủ, vì vậy, nó chỉ phục vụ những gì cần thiết trên trang chủ. Sau đó, khi bạn truy cập vào hồ sơ của mình, nó sẽ tải thêm một số javascript cho trang đó bằng ajax. Tùy chọn này cho biết nơi nào trên máy chủ của bạn tải gói đó từ

— Sean
nguồn
1
Không chỉ dành cho mục đích phát triển, câu trả lời của @ jhnns giải thích cách nó ảnh hưởng đến đầu ra của trình tải.
— Ôn
Nó giống nhau phải không? thuộc tính này cho trình tải của bạn và phần mềm trung gian của bạn tìm tài sản thực ở đâu, hy vọng bạn sẽ không sử dụng webpackmiddleware hoặc webpack-dev-server trong môi trường sản xuất của bạn, vì vậy tôi nghĩ rằng đây chỉ dành cho dev enviroment, vui lòng tham khảo webpack.github .io / docs / webpack-dev-server.html
— Sean
1
Từ webpack.github.io/docs/configuration.html#output-publicpath , có vẻ như tùy chọn này yêu cầu webpack điền vào url hoặc đường dẫn chính xác của tài sản trong các tệp được tạo, không chỉ cho phần mềm trung gian. Khi chạy dev server, tôi nghĩ phần mềm trung gian nhìn vào publichPathđể chiếm quyền điều khiển và trả lại các tệp trong bộ nhớ.
— Ôn
chính xác, trong môi trường sản xuất của bạn, bạn sẽ sử dụng webpack -pđể xây dựng tài sản của mình và tài sản của bạn sẽ được phục vụ bởi máy chủ ứng dụng hoặc máy chủ nginx của bạn thay vì máy chủ webpack hoặc phần mềm trung gian webpack, vì vậy cấu hình này không còn hữu ích trong môi trường sản xuất, tôi có đúng không ?
— Sean
7
Không, tùy chọn này hữu ích trong máy chủ dev, nhưng mục đích của nó là tải các gói script không đồng bộ trong sản xuất. Giả sử bạn có một ứng dụng trang đơn rất lớn (ví dụ Facebook). Facebook sẽ không muốn phục vụ tất cả các javascript của mình mỗi khi bạn tải trang chủ, vì vậy, nó chỉ phục vụ những gì cần thiết trên trang chủ. Sau đó, khi bạn truy cập vào hồ sơ của mình, nó sẽ tải thêm một số javascript cho trang đó bằng ajax. Tùy chọn này cho biết nơi nào trên máy chủ của bạn tải gói đó từ
— Charlie Martin
19

Bạn có thể sử dụng publicPath để trỏ đến vị trí mà bạn muốn máy chủ webpack-dev-server phục vụ các tệp "ảo" của nó. Tùy chọn publicPath sẽ là cùng một vị trí của tùy chọn xây dựng nội dung cho máy chủ webpack-dev-server. webpack-dev-server tạo các tệp ảo mà nó sẽ sử dụng khi bạn khởi động nó. Các tệp ảo này giống với các tệp mà gói gói thực tế mà webpack tạo ra. Về cơ bản, bạn sẽ muốn tùy chọn --content-base trỏ đến thư mục mà index.html của bạn đang ở. Đây là một thiết lập ví dụ:

//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 đã tạo một thư mục tài sản ảo cùng với tệp bundle.js ảo mà nó đề cập đến. Bạn có thể kiểm tra điều này bằng cách truy cập localhost: 8080 / nội dung / bundle.js sau đó kiểm tra ứng dụng của bạn để biết các tệp này. Chúng chỉ được tạo khi bạn chạy webpack-dev-server.

— Isaac Pak
nguồn
Một lời giải thích tốt như vậy, nhưng sau đó nếu tôi chuyển sang sản xuất hoặc xây dựng bằng tay /build/bundle.jstôi sẽ phải thay đổi srctrong index.htmltập tin của mình phải không?
— ArchNoob
Xin lỗi vì sự phản ứng chậm. Bạn không phải thay đổi src. Cho dù bạn đang sản xuất hay phát triển, webpack sẽ tạo ra bundle.js trong đường dẫn đầu ra. Trong ví dụ trên, nó sẽ là /build/bundle.js.
— Isaac Pak
Cảm ơn bạn, tôi đang hỏi về srcdòng trong tệp index.html. Ngay bây giờ nó đang chỉ đến "assets/bundle.js"nếu nó chuyển sang sản xuất thì gói sẽ xuất hiện "build/bundle.js"nên tôi sẽ phải thay đổi nó trong dòng src html thành src="build/bundle.js". Hoặc có một cách tự động hơn?
— ArchNoob
2
Tôi hiểu câu hỏi của bạn bây giờ. Có, bạn sẽ cần thay đổi src thành build / bundle.js để sản xuất. Đối với một cách tự động để làm điều này, tôi không chắc chắn. Tôi đã thấy những người khác tạo 2 tệp webpack.config.js khác nhau, một cho sản xuất và một để phát triển. Có lẽ có một cách lập trình như nếu (ENV === sản xuất) làm điều này ... nhưng tôi đã không thử điều đó.
— Isaac Pak
@ArchNoob Chỉ cần một người đứng đầu về cách tôi làm điều này trong sản xuất bây giờ. Tôi đã không thay đổi giá trị src nhưng thay vào đó tôi đã thay đổi giá trị publicPath của mình từ /assets/thành /build. Bằng cách này, tôi không phải thay đổi index.html. Tôi cũng đã chuyển index.html của mình ra khỏi thư mục bản dựng và vào thư mục gốc của ứng dụng.
— Isaac Pak
15

trong trường hợp của tôi, tôi có một cdn và tôi sẽ đặt tất cả các tệp tĩnh đã xử lý của mình (js, imss, phông chữ ...) vào cdn của tôi, giả sử url là http://my.cdn.com/

vì vậy, nếu có tệp js là url giới thiệu ban đầu trong html là './js/my.js' thì nó sẽ trở thành http://my.cdn.com/js/my.js trong môi trường sản xuất

trong trường hợp đó, điều tôi cần làm chỉ là đặt publicpath bằng http://my.cdn.com/ và webpack sẽ tự động thêm tiền tố đó

— Gỗ Kent
nguồn
Nó dường như không thêm bất kỳ tiền tố nào trong trường hợp của tôi.
— Param Singh
14

tên tệp chỉ định tên của tệp mà tất cả mã được gói của bạn sẽ được tích lũy sau khi trải qua bước xây dựng.

đường dẫn chỉ định thư mục đầu ra nơi app.js (tên tệp) sẽ được lưu trong đĩa. Nếu không có thư mục đầu ra, webpack sẽ tạo thư mục đó cho bạn. ví dụ:

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

Điều này sẽ tạo một thư mục myproject / example / dist và trong thư mục đó, nó tạo app.js , /myproject/examples/dist/app.js . Sau khi xây dựng, bạn có thể duyệt đến myproject / example / dist / app.js để xem mã được gói

publicPath: "Tôi nên đặt gì ở đây?"

publicPath chỉ định thư mục ảo trong máy chủ web từ nơi tệp được đóng gói, app.js sẽ được phục vụ từ đó. Hãy nhớ rằng, máy chủ từ khi sử dụng publicPath có thể là webpack-dev-server hoặc express server hoặc máy chủ khác mà bạn có thể sử dụng với webpack.

ví dụ

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

cấu hình này yêu cầu webpack gói tất cả các tệp js của bạn vào các ví dụ / dist / app.js và ghi vào tệp đó.

publicPath báo cho webpack-dev-server hoặc express server để phục vụ tệp được đóng gói này, ví dụ: ví dụ / dist / app.js từ vị trí ảo được chỉ định trong máy chủ tức là / công khai / tài sản / js. Vì vậy, trong tệp html của bạn, bạn phải tham chiếu tệp này là

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

Vì vậy, tóm lại, publicPath giống như ánh xạ giữa virtual directorytrong máy chủ của bạn và output directoryđược chỉ định bởi cấu hình output.path, Bất cứ khi nào yêu cầu tệp công khai / nội dung / js / app.js đến, tệp /examples/dist/app.js sẽ được cung cấp

— udeep shrestha
nguồn
2
giải thích tốt!
— Ganesh Pandey
3

Tài liệu webpack2 giải thích điều này theo cách gọn gàng hơn nhiều: https://webpack.js.org/guides/public-path/#use-case

webpack có một cấu hình rất hữu ích cho phép bạn chỉ định đường dẫn cơ sở cho tất cả các tài sản trên ứng dụng của bạn. Nó được gọi là publicPath.

— Alan
nguồn
2

publicPath được sử dụng bởi webpack để thay thế đường dẫn tương đối được xác định trong css của bạn để giới thiệu tệp hình ảnh và phông chữ.

— Khalid Azam
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.