Apa yang dilakukan “publicPath” di Webpack?

250

Dokumen Webpack menyatakan bahwa output.publicPath:

Dari output.pathtampilan JavaScript.

Bisakah Anda jelaskan apa artinya ini sebenarnya?

Saya menggunakan output.pathdan output.filenameuntuk menentukan di mana Webpack harus menampilkan hasilnya, tapi saya tidak yakin apa yang harus dimasukkan output.publicPathdan apakah itu diperlukan.

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: "What should I put here?"   
  } 
}
Misha Moroshko
sumber
17
Saya ingin menambahkan pertanyaan ini: kapan Anda akan menggunakan pathdan kapan Anda akan menggunakan publicPath?
wmock
6
Seseorang di tim dev mereka harus bangun. Begitu banyak yang mengajukan pertanyaan ini
Royi Namir
di sini adalah dokumen untuk webpack2 .
Eliran Malka

Jawaban:

133

output.path

Direktori disk lokal untuk menyimpan semua file output Anda (Path absolut) .

Contoh: path.join(__dirname, "build/")

Webpack akan menampilkan semuanya localdisk/path-to-your-project/build/


output.publicPath

Tempat Anda mengunggah file yang dibundel. (Relatif terhadap root server)

Contoh: /assets/

Diasumsikan Anda menyebarkan aplikasi di root server http://server/.

Dengan menggunakan /assets/, aplikasi akan menemukan Webpack aset di: http://server/assets/. Di bawah tenda, setiap url yang dijumpai webpack akan ditulis ulang untuk memulai dengan " /assets/".

src="picture.jpg" Menulis ulang ➡ src="/assets/picture.jpg"

Diakses oleh: ( http://server/assets/picture.jpg)


src="/img/picture.jpg" Menulis ulang ➡ src="/assets/img/picture.jpg"

Diakses oleh: ( http://server/assets/img/picture.jpg)

Kevin Law
sumber
65

Ketika dieksekusi di browser, webpack perlu tahu di mana Anda akan meng-host bundel yang dihasilkan. Dengan demikian ia dapat meminta potongan tambahan (saat menggunakan pemecahan kode ) atau file yang direferensikan dimuat masing - masing melalui file-loader atau url-loader .

Sebagai contoh: Jika Anda mengkonfigurasi server http Anda untuk meng-host bundel yang dihasilkan di bawah /assets/Anda harus menulis:publicPath: "/assets/"

Johannes Ewald
sumber
3
Bisakah Anda memberi tahu saya di mana folder aset berada? Saya ingin melihat file di dalam folder aset Terima kasih.
gauti
53

publicPath hanya digunakan untuk tujuan dev, Saya bingung ketika pertama kali melihat properti konfigurasi ini, tetapi sekarang masuk akal bahwa saya telah menggunakan webpack untuk sementara waktu

misalkan Anda meletakkan semua file sumber js Anda di bawah srcfolder, dan Anda mengkonfigurasi paket web Anda untuk membangun file sumber dengan distfolder output.path.

Tetapi Anda ingin melayani aset statis Anda di bawah lokasi yang lebih bermakna seperti webroot/public/assets, kali ini Anda dapat menggunakan out.publicPath='/webroot/public/assets', sehingga dalam html Anda, Anda dapat merujuk js Anda dengan <script src="/webroot/public/assets/bundle.js"></script>.

ketika Anda meminta webroot/public/assets/bundle.jsyang webpack-dev-serverakan menemukan js di bawah folder dist

Memperbarui:

terima kasih untuk Charlie Martin untuk memperbaiki jawaban saya

asli: publicPath hanya digunakan untuk tujuan dev, ini bukan hanya untuk tujuan dev

Tidak, opsi ini berguna di server dev, tetapi tujuannya adalah untuk memuat berkas skrip secara asinkron dalam produksi. Katakanlah Anda memiliki aplikasi satu halaman yang sangat besar (misalnya Facebook). Facebook tidak ingin menayangkan semua javascript-nya setiap kali Anda memuat beranda, jadi itu hanya melayani apa yang dibutuhkan di beranda. Kemudian, ketika Anda pergi ke profil Anda, itu memuat beberapa javascript untuk halaman itu dengan ajax. Opsi ini memberitahukan di mana server Anda memuat bundel itu

Sean
sumber
1
Ini bukan hanya untuk tujuan dev, jawab @ jhnns menjelaskan bagaimana pengaruhnya terhadap output loader.
Wen
itu sama bukan? properti ini memberitahu loader Anda, dan middleware Anda di mana menemukan aset nyata, semoga Anda tidak akan menggunakan webpackmiddleware, atau webpack-dev-server di lingkungan produksi Anda, jadi saya pikir ini hanya untuk lingkungan pengembang, silakan lihat webpack.github .io / docs / webpack-dev-server.html
Sean
1
Dari webpack.github.io/docs/configuration.html#output-publicpath ini, tampaknya opsi ini memberi tahu webpack untuk mengisi url atau jalur aset yang benar dalam file yang dihasilkan, bukan hanya untuk middlewares. Saat menjalankan server dev, saya pikir middleware melihat publichPathuntuk membajak permintaan dan mengembalikan file dalam memori.
Wen
tepatnya, di lingkungan produksi Anda, Anda akan gunakan webpack -puntuk membangun aset Anda, dan aset Anda harus dilayani oleh server aplikasi atau server nginx Anda alih-alih server webpack atau webpack middleware, jadi konfigurasi ini tidak lagi berguna di lingkungan produksi, apakah saya benar ?
Sean
7
Tidak, opsi ini berguna di server dev, tetapi tujuannya adalah untuk memuat berkas skrip secara asinkron dalam produksi. Katakanlah Anda memiliki aplikasi satu halaman yang sangat besar (misalnya Facebook). Facebook tidak ingin menayangkan semua javascript-nya setiap kali Anda memuat beranda, jadi itu hanya melayani apa yang dibutuhkan di beranda. Kemudian, ketika Anda pergi ke profil Anda, itu memuat beberapa javascript untuk halaman itu dengan ajax. Opsi ini memberitahu Anda dari mana server Anda memuat bundel itu
Charlie Martin
19

Anda dapat menggunakan publicPath untuk menunjuk ke lokasi di mana Anda ingin webpack-dev-server untuk menyajikan file "virtual" -nya. Opsi publicPath akan menjadi lokasi yang sama dari opsi pembuatan konten untuk webpack-dev-server. webpack-dev-server membuat file virtual yang akan digunakan saat Anda memulainya. File-file virtual ini menyerupai file bundel sebenarnya yang dibuat oleh webpack. Pada dasarnya Anda akan menginginkan opsi --content-base untuk menunjuk ke direktori tempat index.html Anda berada. Berikut adalah contoh setup:

//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 telah membuat folder aset virtual bersama dengan file bundle.js virtual yang dimaksud. Anda dapat menguji ini dengan pergi ke localhost: 8080 / aset / bundle.js kemudian periksa aplikasi Anda untuk file-file ini. Mereka hanya dihasilkan ketika Anda menjalankan webpack-dev-server.

Isaac Pak
sumber
Penjelasan yang bagus, tetapi kemudian jika saya pindah ke produksi atau membuat build dengan tangan /build/bundle.jssaya harus mengubah file srcsaya index.htmlkan?
ArchNoob
Maaf atas tanggapan yang terlambat. Anda tidak perlu mengubah src. Baik dalam produksi atau pengembangan, webpack akan membuat bundle.js di jalur output. Dalam contoh di atas akan menjadi /build/bundle.js.
Isaac Pak
Terima kasih, saya bertanya tentang srcbaris dalam file index.html. Sekarang ini menunjuk ke "assets/bundle.js"jika pindah ke produksi bundel akan "build/bundle.js"jadi saya harus mengubah itu di baris src html ke src="build/bundle.js". Atau ada cara yang lebih otomatis?
ArchNoob
2
Saya mengerti pertanyaan Anda sekarang. Ya, Anda perlu mengubah src menjadi build / bundle.js untuk produksi. Adapun cara otomatis untuk melakukan ini, saya tidak yakin. Saya telah melihat orang lain membuat 2 file webpack.config.js berbeda, satu untuk produksi dan satu untuk pengembangan. Mungkin ada cara prgrammatis seperti jika (ENV === produksi) melakukan ini ... tapi saya belum mencobanya.
Isaac Pak
@ArchNoob Baru tahu bagaimana saya melakukan ini di produksi sekarang. Saya tidak mengubah nilai src tetapi saya mengubah nilai publicPath saya dari /assets/menjadi /build. Dengan cara ini saya tidak perlu mengubah index.html saya. Saya juga memindahkan index.html saya dari folder build dan ke root aplikasi.
Isaac Pak
15

dalam kasus saya, saya punya cdn, dan saya akan menempatkan semua file statis saya yang sudah diproses (js, imgs, fonts ...) ke dalam cdn saya, misalkan urlnya adalah http://my.cdn.com/

jadi jika ada file js yang merupakan url rujukan asli dalam html adalah './js/my.js' itu harus menjadi http://my.cdn.com/js/my.js di lingkungan produksi

dalam hal itu, apa yang perlu saya lakukan hanyalah mengatur publicpath sama dengan http://my.cdn.com/ dan webpack akan secara otomatis menambahkan awalan itu

Kent Wood
sumber
Tampaknya tidak menambahkan awalan dalam kasus saya.
Param Singh
14

nama file menentukan nama file yang akan diakumulasi oleh semua kode yang dibundel Anda setelah melalui langkah pembangunan.

path menentukan direktori output tempat app.js (nama file) akan disimpan dalam disk. Jika tidak ada direktori output, webpack akan membuat direktori itu untuk Anda. sebagai contoh:

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

Ini akan membuat direktori myproject / example / dist dan di bawah direktori itu ia menciptakan app.js , /myproject/examples/dist/app.js . Setelah membangun, Anda dapat menelusuri ke myproject / example / dist / app.js untuk melihat kode yang dibundel

publicPath: "Apa yang harus saya taruh di sini?"

publicPath menentukan direktori virtual di server web dari mana file yang dibundel, app.js akan dilayani. Ingat, kata server saat menggunakan publicPath dapat berupa webpack-dev-server atau server ekspres atau server lain yang dapat Anda gunakan dengan webpack.

sebagai contoh

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

konfigurasi ini memberitahu webpack untuk menggabungkan semua file js Anda ke dalam contoh / dist / app.js dan menulis ke dalam file itu.

publicPath memberitahu webpack-dev-server atau server ekspres untuk menyajikan file yang dibundel ini yaitu contoh / dist / app.js dari lokasi virtual yang ditentukan di server yaitu / public / assets / js. Jadi dalam file html Anda, Anda harus merujuk file ini sebagai

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

Jadi secara ringkas, publicPath seperti pemetaan antara virtual directorydi server Anda dan output directoryditentukan oleh konfigurasi output.path, Setiap kali permintaan untuk file publik / aset / js / app.js datang, file /examples/dist/app.js akan dilayani

udeep shrestha
sumber
2
dijelaskan dengan baik!
Ganesh Pandey
3

Dokumentasi webpack2 menjelaskan ini dengan cara yang jauh lebih bersih: https://webpack.js.org/guides/public-path/#use-cases

webpack memiliki konfigurasi yang sangat berguna yang memungkinkan Anda menentukan jalur dasar untuk semua aset pada aplikasi Anda. Ini disebut publicPath.

Alan
sumber
2

publicPath digunakan oleh webpack untuk mengganti jalur relatif yang didefinisikan dalam css Anda untuk merujuk file gambar dan font.

Khalid Azam
sumber