Dokumen Webpack menyatakan bahwa output.publicPath
:
Dari
output.path
tampilan JavaScript.
Bisakah Anda jelaskan apa artinya ini sebenarnya?
Saya menggunakan output.path
dan output.filename
untuk menentukan di mana Webpack harus menampilkan hasilnya, tapi saya tidak yakin apa yang harus dimasukkan output.publicPath
dan apakah itu diperlukan.
module.exports = {
output: {
path: path.resolve("./examples/dist"),
filename: "app.js",
publicPath: "What should I put here?"
}
}
javascript
webpack
Misha Moroshko
sumber
sumber
path
dan kapan Anda akan menggunakanpublicPath
?Jawaban:
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/
".sumber
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/"
sumber
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 waktumisalkan Anda meletakkan semua file sumber js Anda di bawah
src
folder, dan Anda mengkonfigurasi paket web Anda untuk membangun file sumber dengandist
folderoutput.path
.Tetapi Anda ingin melayani aset statis Anda di bawah lokasi yang lebih bermakna seperti
webroot/public/assets
, kali ini Anda dapat menggunakanout.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.js
yangwebpack-dev-server
akan menemukan js di bawah folder distMemperbarui:
terima kasih untuk Charlie Martin untuk memperbaiki jawaban saya
asli: publicPath hanya digunakan untuk tujuan dev, ini bukan hanya untuk tujuan dev
sumber
publichPath
untuk membajak permintaan dan mengembalikan file dalam memori.webpack -p
untuk 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 ?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:
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.
sumber
/build/bundle.js
saya harus mengubah filesrc
sayaindex.html
kan?src
baris 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 kesrc="build/bundle.js"
. Atau ada cara yang lebih otomatis?/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.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
sumber
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:
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
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
Jadi secara ringkas, publicPath seperti pemetaan antara
virtual directory
di server Anda danoutput directory
ditentukan oleh konfigurasi output.path, Setiap kali permintaan untuk file publik / aset / js / app.js datang, file /examples/dist/app.js akan dilayanisumber
Dokumentasi webpack2 menjelaskan ini dengan cara yang jauh lebih bersih: https://webpack.js.org/guides/public-path/#use-cases
sumber
publicPath digunakan oleh webpack untuk mengganti jalur relatif yang didefinisikan dalam css Anda untuk merujuk file gambar dan font.
sumber