Cosa fa "publicPath" in Webpack?

250

I documenti di Webpack affermano che output.publicPathè:

Il output.pathdal punto di vista del JavaScript.

Potresti per favore approfondire cosa significa effettivamente?

Uso output.pathe output.filenameper specificare dove Webpack dovrebbe produrre il risultato, ma non sono sicuro di cosa inserire output.publicPathe se è necessario.

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

javascript webpack

— Misha Moroshko
fonte

17

Vorrei aggiungere a questa domanda: quando useresti pathe quando useresti publicPath?

— Passeggiata

1

La risposta è qui: github.com/webpack/docs/wiki/configuration#outputpublicpath

— mqklin

Se aiuta: tomasalabes.me/blog/_site/web-development/2016/12/10/…

— talabes

6

Qualcuno nella loro squadra di sviluppo dovrebbe svegliarsi. Così tanti fanno questa domanda

— Royi Namir il

ecco i documenti per webpack2 .

— Eliran Malka,

133

`output.path`

Directory del disco locale per memorizzare tutti i file di output (percorso assoluto) .

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

Webpack produrrà tutto in localdisk/path-to-your-project/build/

`output.publicPath`

Dove hai caricato i file in bundle. (Relativo alla radice del server)

Esempio: /assets/

Supponendo che tu abbia distribuito l'app nella radice del server http://server/.

Utilizzando /assets/, l'applicazione troverà webpack beni a: http://server/assets/. Sotto il cofano, ogni url che incontra il webpack verrà riscritto per iniziare con " /assets/".

src="picture.jpg" Riscrive ➡ src="/assets/picture.jpg"

Accessibile da: ( http://server/assets/picture.jpg)

src="/img/picture.jpg" Riscrive ➡ src="/assets/img/picture.jpg"

Accessibile da: ( http://server/assets/img/picture.jpg)

— Kevin Law
fonte

65

Quando eseguito nel browser, il webpack deve sapere dove ospiterai il pacchetto generato. Pertanto è in grado di richiedere blocchi aggiuntivi (quando si utilizza la suddivisione del codice ) o file di riferimento caricati rispettivamente tramite il caricatore di file o il caricatore di URL .

Ad esempio: se configuri il tuo server http per ospitare il pacchetto generato sotto /assets/, dovresti scrivere:publicPath: "/assets/"

— Johannes Ewald
fonte

3

Puoi dirmi dove si trova la cartella delle risorse? Vorrei vedere i file nella cartella delle risorse Grazie.

— gauti,

53

~~publicPath viene utilizzato solo a scopo di sviluppo~~, Ero confuso la prima volta che ho visto questa proprietà di configurazione, ma ha senso ora che uso il webpack per un po '

supponiamo di mettere tutti i tuoi file sorgente js nella srccartella e di configurare il tuo webpack per costruire il file sorgente nella distcartella output.path.

Ma vuoi servire le tue risorse statiche in una posizione più significativa come webroot/public/assets, questa volta puoi usarlo out.publicPath='/webroot/public/assets', in modo che nel tuo html, puoi fare riferimento ai tuoi js <script src="/webroot/public/assets/bundle.js"></script>.

quando si richiede webroot/public/assets/bundle.jsla webpack-dev-servertroveranno le js nella cartella dist

Aggiornare:

grazie per Charlie Martin per correggere la mia risposta

originale: publicPath viene utilizzato solo per scopi di sviluppo, questo non è solo per scopi di sviluppo

No, questa opzione è utile nel server dev, ma la sua intenzione è quella di caricare in modo asincrono bundle di script in produzione. Supponi di avere un'applicazione a pagina singola molto grande (ad esempio Facebook). Facebook non vorrebbe servire tutto il suo javascript ogni volta che carichi la homepage, quindi serve solo ciò che è necessario sulla homepage. Quindi, quando vai sul tuo profilo, carica un po 'più di javascript per quella pagina con ajax. Questa opzione indica da dove sul tuo server caricare quel pacchetto

— Sean
fonte

1

Non è solo a scopo di sviluppo, la risposta di @jhnns spiega come influisce sulle uscite del caricatore.

— Wen,

è lo stesso non è vero? questa proprietà dice al tuo caricatore e al tuo middleware dove trovare le risorse reali, speriamo che non utilizzerai webpackmiddleware o webpack-dev-server nel tuo ambiente di produzione, quindi penso che questo sia solo per l'ambiente di sviluppo, fai riferimento a webpack.github .io / docs / webpack-dev-server.html

— Sean

1

Da questo webpack.github.io/docs/configuration.html#output-publicpath sembra che questa opzione indichi al webpack di compilare l'URL o il percorso corretti degli asset nei file generati, non solo per i middleware. Quando eseguo dev server, penso che il middleware guardi publichPathper dirottare le richieste e restituire i file in memoria.

— Wen,

esattamente, nel tuo ambiente di produzione, utilizzerai webpack -pper costruire le tue risorse e le tue risorse dovrebbero essere servite dal tuo server delle applicazioni o dal tuo server nginx invece che dal server webpack o dal middleware webpack, quindi questa configurazione non è più utile nell'ambiente di produzione, ho ragione ?

— Sean,

7

No, questa opzione è utile nel server dev, ma la sua intenzione è quella di caricare in modo asincrono bundle di script in produzione. Supponi di avere un'applicazione a pagina singola molto grande (ad esempio Facebook). Facebook non vorrebbe servire tutto il suo javascript ogni volta che carichi la homepage, quindi serve solo ciò che è necessario sulla homepage. Quindi, quando vai sul tuo profilo, carica un po 'più di javascript per quella pagina con ajax. Questa opzione indica da dove sul tuo server caricare quel pacchetto

— Charlie Martin,

19

Puoi usare publicPath per indicare la posizione in cui vuoi che webpack-dev-server serva i suoi file "virtuali". L'opzione publicPath sarà la stessa posizione dell'opzione di creazione del contenuto per webpack-dev-server. webpack-dev-server crea file virtuali che utilizzerà all'avvio. Questi file virtuali assomigliano ai file bundle reali creati da Webpack. Fondamentalmente vuoi che l'opzione --content-base punti alla directory in cui si trova index.html. Ecco un esempio di installazione:

//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 ha creato una cartella di risorse virtuali insieme a un file bundle.js virtuale a cui fa riferimento. È possibile verificare questo andando su localhost: 8080 / assets / bundle.js quindi controllare l'applicazione per questi file. Vengono generati solo quando si esegue webpack-dev-server.

— Isaac Pak
fonte

Una spiegazione così buona, ma poi se passo alla produzione o realizzo la build a mano, /build/bundle.jsdovrò cambiare il file srcnel mio index.htmlgiusto?

— ArchNoob,

Scusa per la risposta in ritardo. Non è necessario modificare l'src. In produzione o sviluppo, il webpack creerà un bundle.js nel percorso di output. Nell'esempio sopra sarà /build/bundle.js.

— Isaac Pak,

Grazie, sto chiedendo informazioni sulla srcriga nel file index.html. In questo momento sta indicando "assets/bundle.js"se si passerà alla produzione in "build/bundle.js"cui si troverà il bundle, quindi dovrò cambiarlo nella riga html src src="build/bundle.js". O c'è un modo più automatizzato?

— ArchNoob,

2

Capisco la tua domanda ora. Sì, dovrai modificare src in build / bundle.js per la produzione. Per quanto riguarda un modo automatizzato per farlo, non ne sono sicuro. Ho visto altri creare 2 diversi file webpack.config.js, uno per la produzione e uno per lo sviluppo. Probabilmente c'è un modo prgrammaticamente come se (ENV === produzione) faccia questo ... ma non l'ho provato.

— Isaac Pak,

@ArchNoob Solo un avvertimento su come sto facendo questo in produzione ora. Non ho modificato il valore src, ma ho modificato il mio valore publicPath da /assets/a /build. In questo modo non devo cambiare il mio index.html. Ho anche spostato il mio index.html dalla cartella di build e nella radice dell'applicazione.

— Isaac Pak

15

nel mio caso, ho un cdn e inserirò tutti i miei file statici elaborati (js, imgs, fonts ...) nel mio cdn, supponiamo che l'URL sia http://my.cdn.com/

quindi se esiste un file js che è l'URL di riferimento originale in html è './js/my.js' dovrebbe diventare http://my.cdn.com/js/my.js nell'ambiente di produzione

in quel caso, quello che devo fare è semplicemente impostare publicpath uguale a http://my.cdn.com/ e webpack aggiungerà automaticamente quel prefisso

— Kent Wood
fonte

Non sembra aggiungere alcun prefisso nel mio caso.

— Param Singh,

14

nome file specifica il nome del file in cui verrà accumulato tutto il codice in bundle dopo aver completato la fase di creazione.

percorso specifica la directory di output in cui il file app.js (nome file) verrà salvato nel disco. Se non esiste una directory di output, webpack creerà quella directory per te. per esempio:

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

Questo creerà una directory myproject / samples / dist e sotto quella directory creerà app.js , /myproject/examples/dist/app.js . Dopo la compilazione , è possibile cercare myproject / samples / dist / app.js per visualizzare il codice in bundle

publicPath: "Cosa devo mettere qui?"

publicPath specifica la directory virtuale nel server web da cui viene fornito il file in bundle, app.js. Tenere presente che il word server quando si utilizza publicPath può essere webpack-dev-server o express server o altri server che è possibile utilizzare con webpack.

per esempio

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

questa configurazione dice al webpack di raggruppare tutti i tuoi file js in esempi / dist / app.js e scrivere in quel file.

publicPath dice a webpack-dev-server o express server di servire questo file in bundle, ad esempio esempi / dist / app.js dalla posizione virtuale specificata in server, ad esempio / public / assets / js. Quindi nel tuo file html, devi fare riferimento a questo file come

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

Quindi, in sintesi, publicPath è come mappare tra virtual directorynel tuo server e output directoryspecificato dalla configurazione output.path, Ogni volta che arriva la richiesta per il file public / assets / js / app.js , verrà servito il file /examples/dist/app.js

— udeep shrestha
fonte

2

ben spiegato!

— Ganesh Pandey,

3

La documentazione di webpack2 spiega questo in modo molto più pulito: https://webpack.js.org/guides/public-path/#use-cases

webpack ha una configurazione molto utile che ti consente di specificare il percorso di base per tutte le risorse sulla tua applicazione. Si chiama publicPath.

— Alan
fonte

2

publicPath è usato da webpack per il percorso relativo di sostituzione definito nel tuo CSS per fare riferimento al file di immagine e font.

— Khalid Azam
fonte