Webpack'teki “publicPath” ne yapıyor?

250

Webpack dokümanları şunları belirtir output.publicPath:

output.pathJavaScript görünümünden.

Bunun gerçekte ne anlama geldiğini biraz açıklayabilir misiniz?

Kullandığım output.pathve output.filenamenerede WebPack çıkış sonucunu gerektiği belirtmek için, ama emin yazacağınız değilim output.publicPathve gerekli olup olmadığını.

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

javascript webpack

— Misha Moroshko
kaynak

17

Bu soruya eklemek istiyorum: ne zaman pathve ne zaman kullanırsınız publicPath?

— wmock

1

Yanıt burada: github.com/webpack/docs/wiki/configuration#outputpublicpath

— mqklin

Eğer yardımcı olursa: tomasalabes.me/blog/_site/web-development/2016/12/10/…

— talabes

6

Geliştirici ekibinden biri uyanmalı. Pek çok kişi bu soruyu soruyor

— Royi Namir

İşte webpack2 için dokümanlar .

— Eliran Malka

134

`output.path`

Tüm çıktı dosyalarınızı saklamak için yerel disk dizini (Mutlak yol) .

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

Webpack her şeyi localdisk/path-to-your-project/build/

`output.publicPath`

Paketlenmiş dosyalarınızı nereye yüklediğiniz. (Sunucu köküne göre)

Misal: /assets/

Uygulamayı sunucu kökünde dağıttığınız varsayıldı http://server/.

Kullanarak /assets/, Uygulamanın en varlıklarını webpack bulacaksınız: http://server/assets/. Başlık altında, webpack'in karşılaştığı her url " /assets/" ile başlamak için yeniden yazılır .

src="picture.jpg" Yeniden yazıyor ➡ src="/assets/picture.jpg"

Erişen: ( http://server/assets/picture.jpg)

src="/img/picture.jpg" Yeniden yazıyor ➡ src="/assets/img/picture.jpg"

Erişen: ( http://server/assets/img/picture.jpg)

— Kevin Law
kaynak

65

Tarayıcıda yürütüldüğünde, web paketinin oluşturulan paketi nerede barındıracağınızı bilmesi gerekir. Böylece, sırasıyla dosya yükleyici veya url yükleyici aracılığıyla yüklenen ek parçalar ( kod bölme kullanılırken ) veya referans alınan dosyalar talep edebilir .

Örneğin: http sunucunuzu oluşturulan paketi barındırmak üzere yapılandırırsanız, şunu /assets/yazmalısınız:publicPath: "/assets/"

— Johannes Ewald
kaynak

3

Varlıklar klasörünün nerede olduğunu söyleyebilir misiniz? Varlıklar klasörü içindeki dosyaları görmek istiyorum Teşekkürler.

— gauti

53

~~publicPath sadece geliştirme amaçlı kullanılır~~, İlk kez bu yapılandırma özelliğini gördüğümde kafam karıştı, ama şimdi bir süredir webpack kullandığım mantıklı

tüm js kaynak dosyanızı srcklasörün altına koyduğunuzu ve web paketinizi kaynak dosyayı distklasöre oluşturacak şekilde yapılandırdığınızı varsayalım output.path.

Ancak statik varlıklarınızı webroot/public/assetsbu sefer kullanabileceğiniz gibi daha anlamlı bir konumda sunmak istersiniz out.publicPath='/webroot/public/assets', böylece html'nizde js'nize başvurabilirsiniz <script src="/webroot/public/assets/bundle.js"></script>.

Eğer istekte dist klasörü altındaki js bulacaksınızwebroot/public/assets/bundle.jswebpack-dev-server

Güncelleme:

cevabımı düzeltmesi için Charlie Martin için teşekkürler

orijinal: publicPath sadece geliştirme amaçlı kullanılır, bu sadece geliştirme amaçlı değildir

Hayır, bu seçenek geliştirici sunucusunda yararlıdır, ancak amacı üretim sırasında komut dosyası paketlerini eşzamansız olarak yüklemek içindir. Çok büyük bir tek sayfalık uygulamanız olduğunu varsayalım (örneğin Facebook). Facebook, ana sayfayı her yüklediğinizde tüm javascript'lerini sunmak istemez, bu nedenle ana sayfada yalnızca gerekli olanı sunar. Ardından, profilinize gittiğinizde, o sayfa için ajax ile biraz daha javascript yükler. Bu seçenek, sunucunuzda bu paketi nereden yükleyeceğini söyler

— Sean
kaynak

1

Sadece geliştirme amaçlı değil, @ jhnns'ın cevabı yükleyici çıktılarını nasıl etkilediğini açıklıyor.

— Wen

aynı değil mi? Bu özellik yükleyicinize ve ara katman yazılımınıza gerçek varlıkları nerede bulacağını söyler, umarım üretim ortamınızda webpackmiddleware veya webpack-dev-server kullanmazsınız, bu yüzden bu sadece dev çevre için olduğunu düşünüyorum, lütfen webpack.github'a

— Sean

1

Bu webpack.github.io/docs/configuration.html#output-publicpath'ten bu seçenek, web paketine, yalnızca orta yazılımlar için değil, oluşturulan dosyalarda doğru URL'yi veya varlık yolunu doldurmasını söylüyor. Dev sunucusu çalıştırırken, ara katman yazılım publichPathisteklerini kaçırmak ve bellek içi dosyaları döndürmek için bakar düşünüyorum .

— Wen

tam olarak, üretim ortamınızda, webpack -pvarlıklarınızı oluşturmak için kullanacaksınız ve varlıklarınız webpack sunucusu veya webpack ara katman yazılımı yerine uygulama sunucunuz veya nginx sunucunuz tarafından sunulmalıdır, bu nedenle bu yapılandırma artık üretim ortamında kullanışlı değil mi? ?

— Sean

7

Hayır, bu seçenek geliştirici sunucusunda yararlıdır, ancak amacı üretim sırasında komut dosyası paketlerini eşzamansız olarak yüklemek içindir. Çok büyük bir tek sayfalık uygulamanız olduğunu varsayalım (örneğin Facebook). Facebook, ana sayfayı her yüklediğinizde tüm javascript'lerini sunmak istemez, bu nedenle ana sayfada yalnızca gerekli olanı sunar. Ardından, profilinize gittiğinizde, o sayfa için ajax ile biraz daha javascript yükler. Bu seçenek, sunucunuzda bu paketi nereye yükleyeceğini söyler

— Charlie Martin

19

PublicPath'i kullanarak webpack-dev-server'ın "sanal" dosyalarını sunmasını istediğiniz konumu işaret edebilirsiniz. PublicPath seçeneği, webpack-dev-server için içerik oluşturma seçeneğiyle aynı konumda olacaktır. webpack-dev-server başlattığınızda kullanacağı sanal dosyalar oluşturur. Bu sanal dosyalar webpack'in oluşturduğu paketlenmiş gerçek dosyalara benzer. Temel olarak --content-base seçeneğinin index.html dosyanızın bulunduğu dizine işaret etmesini isteyeceksiniz. İşte örnek bir kurulum:

//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 başvurduğu bir sanal bundle.js dosyası ile birlikte bir sanal varlıklar klasörü oluşturmuştur. Bunu localhost: 8080 / asset / bundle.js adresine giderek test edebilirsiniz, ardından uygulamanızda bu dosyaları kontrol edin. Yalnızca webpack-dev-server'ı çalıştırdığınızda oluşturulur.

— Isaac Pak
kaynak

İ üretime taşımak veya elle yapı yaparsanız Böyle iyi bir açıklama, ama sonra /build/bundle.jsben değişmek zorunda kalacak srcbenim de index.htmldosya hakkı?

— ArchNoob

Geç cevap için özür dilerim. Src'yi değiştirmek zorunda değilsiniz. İster üretim ister geliştirme aşamasında olun, webpack çıktı yolunda bir bundle.js oluşturur. Yukarıdaki örnekte /build/bundle.js olacaktır.

— Isaac Pak

Teşekkür ederim, srcindex.html dosyasındaki satırı soruyorum . Şu anda "assets/bundle.js"üretim için hareket eğer paket içinde olacak, "build/bundle.js"bu yüzden html src satırında değiştirmek zorunda kalacak işaret ediyor src="build/bundle.js". Yoksa daha otomatik bir yol var mı?

— ArchNoob

2

Sorunu şimdi anlıyorum. Evet, üretim için / bundle.js dosyasını oluşturmak için src'yi değiştirmeniz gerekecektir. Bunu yapmanın otomatik bir yoluna gelince, emin değilim. Başkalarının biri üretim, diğeri geliştirme olmak üzere 2 farklı webpack.config.js dosyası oluşturduğunu gördüm. Muhtemelen (ENV === üretim) bunu yapmak gibi prgrammatically gibi bir yolu var ... ama ben denemedim.

— Isaac Pak

@ArchNoob Şimdi bunu üretimde nasıl yaptığımla ilgili bir fikir. Src değerini değiştirmedim ama bunun yerine publicPath değerini olarak /assets/değiştirdim /build. Bu şekilde index.html dosyamı değiştirmek zorunda değilim. Ayrıca index.html dosyasını derleme klasöründen uygulamanın kök dizinine taşıdım.

— Isaac Pak

15

benim durumumda, bir cdn var ve ben benim işlenmiş statik dosyaları (js, imgs, yazı tipleri ...) benim cdn yerleştireceğim, url http://my.cdn.com/ varsayalım

bu nedenle, html'deki orijinal referans URL'si olan bir js dosyası varsa './js/my.js' üretim ortamında http://my.cdn.com/js/my.js olmalıdır.

bu durumda, ne yapmalıyım sadece kamu yolu http://my.cdn.com/ eşittir ve webpack otomatik olarak bu öneki ekleyecek

— Kent Wood
kaynak

Benim durumuma herhangi bir önek eklemiyor gibi görünüyor.

— Param Singh

14

Dosya adı belirten dosyanın adını içine tüm paketlenmiş kod oluşturma adımı geçtikten sonra birikmiş almak için gidiyor.

path , app.js'nin (dosya adı) diske kaydedileceği çıkış dizinini belirtir . Çıktı dizini yoksa, webpack sizin için o dizini oluşturacaktır. Örneğin:

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

Bu işlem myproject / samples / dist dizinini oluşturur ve bu dizinin altında app.js , /myproject/examples/dist/app.js dosyasını oluşturur . Oluşturduktan sonra, birlikte verilen kodu görmek için projem / example / dist / app.js dosyasına göz atabilirsiniz.

publicPath: "Buraya ne koymalıyım?"

publicPath , web sunucusunda paketli app.js dosyasının sunulacağı sanal dizini belirtir . Unutmayın, publicPath kullanırken kelime sunucusu webpack-dev-server veya ekspres sunucu veya webpack ile kullanabileceğiniz başka bir sunucu olabilir.

Örneğin

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

bu yapılandırma, web paketine tüm js dosyalarınızı örnekler / dist / app.js olarak paketlemesini ve bu dosyaya yazmasını söyler.

publicPath , webpack-dev-server veya express sunucusuna bu paketlenmiş dosyayı (örn. / dist / app.js , sunucudaki belirtilen sanal konumdan / public / asset / js) sunmasını söyler . Yani html dosyanızda bu dosyaya şu şekilde başvurmalısınız:

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

Özetle, publicPath virtual directorysunucunuzda eşleme gibidir ve output directoryoutput.path yapılandırması tarafından belirtilir, public / asset / js / app.js dosyası için istek geldiğinde, /examples/dist/app.js dosyası sunulacaktır

— Udeep Shrestha
kaynak

2

iyi açıkladı!

— Ganesh Pandey

3

Webpack2 belgeleri bunu daha temiz bir şekilde açıklamaktadır: https://webpack.js.org/guides/public-path/#use-cases

webpack, uygulamanızdaki tüm varlıklar için temel yolu belirtmenize izin veren son derece kullanışlı bir yapılandırmaya sahiptir. Buna publicPath denir.

— Alan
kaynak

2

publicPath, webpack tarafından, görüntü ve yazı tipi dosyasına başvurmak üzere css'nizde tanımlanan göreli yolu değiştirmek için kullanılır.

— Halid Azam
kaynak