Cosa fa “publicPath” in Webpack?

I documenti di Webpack dichiarano che output.publicPath è:

output.path dalla vista di JavaScript.

Potresti per favore approfondire cosa significa in realtà?

Uso output.path e output.filename per specificare dove Webpack deve produrre il risultato, ma non sono sicuro di cosa mettere in output.publicPath e se è necessario.

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

Questo è quello che ho trovato, spero che possa aiutare alcuni di voi. (Correggimi se qualcosa non va):

output.path

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

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

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


output.publicPath

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

Esempio: /assets/

Supponiamo che tu abbia distribuito l’app sul server root http://server/ .

Usando /assets/ , l’app troverà le risorse del pacchetto web su: http://server/assets/ . Sotto il cofano, ogni url che incontri webpack verrà riscritto per iniziare con ” /assets/ “.

src="picture.jpg" Re-scrive ➡ src="/assets/picture.jpg"

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


src="/img/picture.jpg" Re-scrive ➡ src="/assets/img/picture.jpg"

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

Importante

Se si stanno usando style-loader + caricatori con l’opzione sourceMap abilitata, è necessario impostare publicPath . Impostarlo sul percorso assoluto completo dell’indirizzo del server, ad esempio http://server/assets/ modo che le risorse vengano caricate correttamente.

Vedi: https://github.com/webpack/style-loader/issues/55

Quando viene eseguito nel browser, il webpack deve sapere dove verrà ospitato il pacchetto generato. In questo modo è in grado di richiedere ulteriori blocchi (quando si utilizza la suddivisione del codice ) o file di riferimento caricati rispettivamente con il caricatore di file o con il caricatore di url .

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

publicPath è usato solo per scopi di sviluppo , Sono stato confuso al primo momento che ho visto questa proprietà di configurazione, ma ha senso ora che ho usato il webpack per un po ‘

supponiamo di aver inserito tutto il tuo file sorgente js nella cartella src e di configurare il tuo webpack per creare il file sorgente nella cartella dist con output.path .

Ma tu vuoi servire le tue risorse statiche in una posizione più significativa come webroot/public/assets , questa volta puoi usare out.publicPath='/webroot/public/assets' , così che nel tuo html puoi fare riferimento al tuo js con .

quando richiedi webroot/public/assets/bundle.js il webpack-dev-server troverà il js sotto la cartella dist

Aggiornare:

grazie per Charlie Martin per correggere la mia risposta

originale: publicPath è usato solo per scopi di sviluppo, non solo per scopi di sviluppo

No, questa opzione è utile nel server di sviluppo, ma la sua intenzione è quella di caricare in modo asincrono i pacchetti di script in produzione. Supponi di avere un’applicazione di una sola pagina molto grande (ad esempio Facebook). Facebook non vorrebbe servire tutti i suoi javascript ogni volta che caricate la homepage, quindi serve solo ciò che è necessario sulla home page. Quindi, quando vai sul tuo profilo, carica ancora un po ‘di javascript per quella pagina con ajax. Questa opzione indica dove sul tuo server caricare questo pacchetto

È ansible utilizzare publicPath per indicare la posizione in cui si desidera che Webpack-dev-server offra i propri file “virtuali”. L’opzione publicPath sarà la stessa posizione dell’opzione content-build per webpack-dev-server. webpack-dev-server crea file virtuali che userà quando lo avvierai. Questi file virtuali assomigliano agli effettivi file in bundle che il webpack crea. Fondamentalmente vorrai l’opzione –content-base per puntare alla directory in cui è 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   ...   //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 si riferisce. Puoi testare questo andando su localhost: 8080 / assets / bundle.js quindi controlla la tua applicazione per questi file. Vengono generati solo quando si esegue il webpack-dev-server.

nel mio caso, ho un cdn, e ho intenzione di mettere tutti i miei file statici processati (js, imgs, fonts …) nel mio cdn, supponiamo che l’URL sia http://my.cdn.com/

quindi se c’è 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 tal caso, quello che devo fare è impostare publicpath equivale a http://my.cdn.com/ e il webpack aggiungerà automaticamente il prefisso

La documentazione di webpack2 lo spiega in un 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.

publicPath è utilizzato da webpack per la sostituzione del percorso relativo definito nel tuo css per referenziare l’immagine e il file di font.