Apa yang dilakukan “publicPath” di Webpack?

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?"   
  } 
}

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)

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

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

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.

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

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

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.

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