Do czego służy „publicPath” w pakiecie internetowym?

250

WebPACK docs stwierdzają, że output.publicPathjest:

Z output.pathwidoku JavaScript.

Czy mógłbyś wyjaśnić, co to właściwie oznacza?

Używam output.pathi output.filenamedo określania, gdzie Webpack powinien wypisać wynik, ale nie jestem pewien, co należy umieścić output.publicPathi czy jest to wymagane.

module.exports = {
  output: {
    path: path.resolve("./examples/dist"),
    filename: "app.js",
    publicPath: "What should I put here?"   
  } 
}
javascript webpack Misza Moroszko
źródło
17
Chciałbym dodać do tego pytania: kiedy będziesz używać, patha kiedy chcesz publicPath?
wmock
1
Odpowiedź jest tutaj: github.com/webpack/docs/wiki/configuration#outputpublicpath
mqklin
Jeśli pomaga: tomasalabes.me/blog/_site/web-development/2016/12/10/…
talabes
6
Ktoś w ich zespole deweloperów powinien się obudzić. Tak wielu zadaje to pytanie
Royi Namir
oto dokumentacja dla webpack2 .
Eliran Malka

Odpowiedzi:

133

output.path

Lokalny katalog dysku do przechowywania wszystkich plików wyjściowych (ścieżka bezwzględna) .

Przykład: path.join(__dirname, "build/")

Webpack wyśle ​​wszystko do localdisk/path-to-your-project/build/

output.publicPath

Gdzie przesłałeś swoje spakowane pliki. (W odniesieniu do katalogu głównego serwera)

Przykład: /assets/

Zakładając, że wdrożyłeś aplikację w katalogu głównym serwera http://server/.

Przy użyciu /assets/aplikacja znajdzie WebPack aktywów pod adresem: http://server/assets/. Pod maską każdy URL, który napotka webpack, zostanie przepisany na nowo od „ /assets/”.

src="picture.jpg" Ponownie pisze ➡ src="/assets/picture.jpg"

Dostęp: ( http://server/assets/picture.jpg)

src="/img/picture.jpg" Ponownie pisze ➡ src="/assets/img/picture.jpg"

Dostęp: ( http://server/assets/img/picture.jpg)

Kevin Law
źródło
65

Po uruchomieniu w przeglądarce webpack musi wiedzieć, gdzie będziesz hostować wygenerowany pakiet. Dzięki temu jest w stanie zażądać dodatkowych fragmentów (w przypadku podziału kodu ) lub plików referencyjnych ładowanych odpowiednio przez moduł ładujący pliki lub moduł ładujący adresy URL .

Na przykład: jeśli skonfigurujesz serwer http do obsługi wygenerowanego pakietu pod /assets/, powinieneś napisać:publicPath: "/assets/"

Johannes Ewald
źródło
3
Czy możesz mi powiedzieć, gdzie znajduje się folder zasobów? Chciałbym zobaczyć pliki w folderze zasobów Dzięki.
gauti
53

ścieżka publiczna jest używana tylko do celów programistycznych, Po raz pierwszy zobaczyłem tę właściwość config, ale byłem pewien, że od jakiegoś czasu korzystam z webpacka

załóżmy, że umieściłeś cały plik źródłowy js w srcfolderze i skonfigurowałeś swój webpack, aby budować plik źródłowy w distfolderze output.path.

Ale chcesz podawać swoje zasoby statyczne w bardziej znaczącej lokalizacji, np. webroot/public/assetsTym razem możesz użyć out.publicPath='/webroot/public/assets', aby w html można było odwoływać się do pliku js <script src="/webroot/public/assets/bundle.js"></script>.

gdy wniosek znajdzie js pod folderze distwebroot/public/assets/bundle.jswebpack-dev-server

Aktualizacja:

dziękuję Charliemu Martinowi za poprawienie mojej odpowiedzi

original: publicPath służy tylko do celów deweloperskich, nie służy to wyłącznie celom programistycznym

Nie, ta opcja jest przydatna na serwerze deweloperskim, ale jej celem jest asynchroniczne ładowanie pakietów skryptów w produkcji. Załóżmy, że masz bardzo dużą aplikację na jedną stronę (na przykład Facebook). Facebook nie chciałby wyświetlać całego javascript za każdym razem, gdy ładujesz stronę główną, więc wyświetla tylko to, czego potrzebujesz na stronie głównej. Następnie, kiedy przejdziesz do swojego profilu, ładuje on trochę więcej javascript dla tej strony z ajax. Ta opcja informuje, gdzie na serwerze ma zostać załadowany ten pakiet

Sean
źródło
1
Odpowiedź nie jest przeznaczona tylko do celów programistycznych, odpowiedź @ jhnns wyjaśnia, w jaki sposób wpływa ona na dane wyjściowe modułu ładującego.
Wen
to jest to samo, prawda? ta właściwość informuje moduł ładujący i oprogramowanie pośrednie, gdzie znaleźć prawdziwe zasoby, mam nadzieję, że nie użyjesz webpackmiddleware ani webpack-dev-server w środowisku produkcyjnym, więc myślę, że jest to tylko dla środowiska programistycznego, zapoznaj się z webpack.github .io / docs / webpack-dev-server.html
Sean
1
Z tego webpack.github.io/docs/configuration.html#output-publicpath wydaje się, że ta opcja każe webpackowi wpisać poprawny adres URL lub ścieżkę zasobów w wygenerowanych plikach, nie tylko dla oprogramowania pośredniego. Podczas pracy z serwerem deweloperskim myślę, że oprogramowanie pośrednie sprawdza publichPathprzechwytywanie żądań i zwraca pliki w pamięci.
Wen
dokładnie w twoim środowisku produkcyjnym użyjesz webpack -pdo zbudowania swoich zasobów, a twoje zasoby powinny być obsługiwane przez serwer aplikacji lub serwer nginx zamiast serwera webpack lub oprogramowania pośredniego webpack, więc ta konfiguracja nie jest już przydatna w środowisku produkcyjnym, mam rację ?
Sean,
7
Nie, ta opcja jest przydatna na serwerze deweloperskim, ale jej celem jest asynchroniczne ładowanie pakietów skryptów w produkcji. Załóżmy, że masz bardzo dużą aplikację na jedną stronę (na przykład Facebook). Facebook nie chciałby wyświetlać całego javascript za każdym razem, gdy ładujesz stronę główną, więc wyświetla tylko to, czego potrzebujesz na stronie głównej. Następnie, kiedy przejdziesz do swojego profilu, ładuje on trochę więcej javascript dla tej strony z ajax. Ta opcja informuje, skąd na serwerze ma zostać załadowany ten pakiet
Charlie Martin
19

Możesz użyć publicPath, aby wskazać lokalizację, w której serwer webpack-dev-server będzie obsługiwał swoje „wirtualne” pliki. Opcja publicPath będzie tą samą lokalizacją opcji tworzenia treści dla webpack-dev-server. webpack-dev-server tworzy pliki wirtualne, które będą używane podczas uruchamiania. Te pliki wirtualne przypominają rzeczywiste pliki pakietowe tworzone przez pakiet WWW. Zasadniczo chcesz, aby opcja --content-base wskazywała katalog, w którym znajduje się twoja strona index.html. Oto przykładowa konfiguracja:

//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 utworzył folder zasobów wirtualnych wraz z plikiem wirtualnym bundle.js, do którego się odnosi. Możesz to sprawdzić, przechodząc do localhost: 8080 / asset / bundle.js, a następnie sprawdź w aplikacji te pliki. Są one generowane tylko po uruchomieniu serwera webpack-dev-server.

Isaac Pak
źródło
To dobre wytłumaczenie, ale jeśli jednak przejdę do produkcji lub wykonam kompilację ręcznie /build/bundle.js, będę musiał zmienić plik srcw moim index.htmlpliku, prawda?
ArchNoob,
Przepraszam za późną odpowiedź. Nie musisz zmieniać src. Niezależnie od tego, czy jesteś w produkcji, czy w fazie rozwoju, webpack utworzy plik bundle.js na ścieżce wyjściowej. W powyższym przykładzie będzie to /build/bundle.js.
Isaac Pak
Dziękuję, pytam o srcwiersz w pliku index.html. W tej chwili wskazuje, "assets/bundle.js"czy przeniesie się do produkcji, w której będzie pakiet, "build/bundle.js"więc muszę to zmienić w wierszu html src na src="build/bundle.js". Czy istnieje bardziej zautomatyzowany sposób?
ArchNoob,
2
Teraz rozumiem twoje pytanie. Tak, musisz zmienić plik src na build / bundle.js do celów produkcyjnych. Jeśli chodzi o zautomatyzowany sposób na zrobienie tego, nie jestem pewien. Widziałem, jak inni tworzą 2 różne pliki webpack.config.js, jeden dla produkcji i jeden dla programistów. Prawdopodobnie jest to sposób prgramatyczny, jak gdyby to zrobić (produkcja ENV ===) ... ale nie próbowałem tego.
Isaac Pak
@ArchNoob Tylko jedna wiadomość na temat tego, jak teraz to robię w produkcji. Nie zmieniłem wartości src, ale zamiast tego zmieniłem wartość publicPath z/assets/ na /build. W ten sposób nie muszę zmieniać indeksu.html. Przeniosłem również plik index.html z folderu kompilacji do katalogu głównego aplikacji.
Izaak Pak
15

w moim przypadku mam cdn i zamierzam umieścić wszystkie moje przetworzone pliki statyczne (js, imgs, czcionki ...) w moim cdn, załóżmy, że adres URL to http://my.cdn.com/

więc jeśli istnieje plik js, który jest oryginalnym adresem URL odwołania w html, to „./js/my.js”, powinien on stać się http://my.cdn.com/js/my.js w środowisku produkcyjnym

w takim przypadku muszę tylko ustawić publicpath na http://my.cdn.com/, a webpack automatycznie doda ten prefiks

Kent Wood
źródło
Wydaje się, że w moim przypadku nie dodaje żadnego prefiksu.
Param Singh,
14

nazwa_pliku określa nazwę pliku, w którym cały Twój pakiet będzie gromadzony po przejściu przez etap kompilacji.

ścieżka określa katalog wyjściowy, w którym plik app.js (nazwa pliku) zostanie zapisany na dysku. Jeśli nie ma katalogu wyjściowego, webpack utworzy dla ciebie ten katalog. na przykład:

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

Spowoduje to utworzenie katalogu myproject / Examples / dist iw tym katalogu utworzy app.js , /myproject/examples/dist/app.js . Po zbudowaniu możesz przejść do myproject / Examples / dist / app.js, aby zobaczyć dołączony kod

publicPath: „Co powinienem tu umieścić?”

publicPath określa katalog wirtualny na serwerze WWW, z którego dołączony jest plik, z którego będzie obsługiwany plik app.js. Pamiętaj, że słowo server podczas korzystania z publicPath może być albo webpack-dev-server, albo serwerem ekspresowym lub innym serwerem, którego możesz używać z webpack.

na przykład

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

ta konfiguracja nakazuje webpackowi spakować wszystkie twoje pliki js w przykłady / dist / app.js i zapisać w tym pliku.

publicPath mówi webpack -dev-server lub serwerowi ekspresowemu, aby obsługiwał ten dołączony plik, czyli przykłady / dist / app.js z określonej wirtualnej lokalizacji na serwerze, tj. / public / asset / js. Tak więc w pliku HTML musisz odwołać się do tego pliku jako

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

Podsumowując, publicPath przypomina mapowanie pomiędzy virtual directoryna twoim serwerze i output directoryokreślone przez konfigurację output.path , ilekroć pojawi się żądanie pliku public / resources / js / app.js , plik /examples/dist/app.js zostanie dostarczony

udeep shrestha
źródło
2
dobrze wyjaśnione!
Ganesh Pandey,
2

publicPath jest używany przez webpack do zastępowania ścieżki względnej zdefiniowanej w twoim css do odsyłania do pliku obrazu i czcionki.

Khalid Azam
źródło