Que fait «publicPath» dans Webpack?


250

Les documents Webpack indiquent que output.publicPath:

Le output.pathde la vue de l'activation de Javascript.

Pourriez-vous expliquer ce que cela signifie réellement?

J'utilise output.pathet output.filenamepour spécifier où Webpack doit sortir le résultat, mais je ne sais pas quoi mettre output.publicPathet si c'est nécessaire.

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

17
Je voudrais ajouter à cette question: quand utiliseriez-vous pathet quand utiliseriez-vous publicPath?
wmock



6
Quelqu'un dans son équipe de développement devrait se réveiller. Beaucoup posent cette question
Royi Namir

Réponses:


133

output.path

Répertoire du disque local pour stocker tous vos fichiers de sortie (chemin absolu) .

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

Webpack affichera tout dans localdisk/path-to-your-project/build/


output.publicPath

Où vous avez téléchargé vos fichiers groupés. (Par rapport à la racine du serveur)

Exemple: /assets/

Supposons que vous ayez déployé l'application à la racine du serveur http://server/.

En utilisant /assets/, l'application trouvera webpack actifs à: http://server/assets/. Sous le capot, toutes les URL rencontrées par webpack seront réécrites pour commencer par " /assets/".

src="picture.jpg" Réécrit ➡ src="/assets/picture.jpg"

Accessible par: ( http://server/assets/picture.jpg)


src="/img/picture.jpg" Réécrit ➡ src="/assets/img/picture.jpg"

Accessible par: ( http://server/assets/img/picture.jpg)


65

Lorsqu'il est exécuté dans le navigateur, le webpack doit savoir où vous allez héberger le bundle généré. Ainsi, il est capable de demander des morceaux supplémentaires (lors de l'utilisation du fractionnement de code ) ou des fichiers référencés chargés via le chargeur de fichiers ou le chargeur d' url respectivement.

Par exemple: Si vous configurez votre serveur http pour héberger le bundle généré sous, /assets/vous devez écrire:publicPath: "/assets/"


3
Pouvez-vous me dire où se trouve le dossier des ressources? Je voudrais voir les fichiers dans le dossier des ressources Merci.
gauti

53

le publicPath est juste utilisé à des fins de développement, J'étais confus la première fois que j'ai vu cette propriété de configuration, mais il est logique maintenant que j'utilise Webpack depuis un certain temps

supposez que vous placez tous vos fichiers source js dans un srcdossier et que vous configurez votre webpack pour créer le fichier source dans un distdossier avec output.path.

Mais vous souhaitez diffuser vos ressources statiques sous un emplacement plus significatif, comme webroot/public/assetscette fois, vous pouvez l'utiliser out.publicPath='/webroot/public/assets', de sorte que dans votre html, vous puissiez référencer vos js avec <script src="/webroot/public/assets/bundle.js"></script>.

lorsque vous demandez webroot/public/assets/bundle.jsle webpack-dev-servertrouvera le js sous le dossier dist

Mettre à jour:

merci pour Charlie Martin de corriger ma réponse

original: le publicPath est juste utilisé à des fins de développement, ce n'est pas seulement à des fins de développement

Non, cette option est utile dans le serveur de développement, mais son intention est de charger de manière asynchrone des ensembles de scripts en production. Supposons que vous ayez une très grande application d'une seule page (par exemple Facebook). Facebook ne voudrait pas servir tout son javascript à chaque fois que vous chargez la page d'accueil, il ne sert donc que ce qui est nécessaire sur la page d'accueil. Ensuite, lorsque vous accédez à votre profil, il charge un peu plus de javascript pour cette page avec ajax. Cette option lui indique où sur votre serveur à partir duquel charger cet ensemble


1
Ce n'est pas seulement à des fins de développement, la réponse de @ jhnns explique comment cela affecte les sorties du chargeur.
Wen

c'est pareil non? cette propriété indique à votre chargeur et à votre middleware où trouver les actifs réels, espérons que vous n'utiliserez pas webpackmiddleware ou webpack-dev-server dans votre environnement de production, donc je pense que c'est juste pour l'environnement de développement, veuillez vous référer à webpack.github .io / docs / webpack-dev-server.html
Sean

1
A partir de ce webpack.github.io/docs/configuration.html#output-publicpath, il semble que cette option indique à webpack de remplir l'URL ou le chemin d'accès corrects des actifs dans les fichiers générés, pas seulement pour les middlewares. Lors de l'exécution du serveur de développement, je pense que le middleware examine les publichPathdemandes de piratage et renvoie les fichiers en mémoire.
Wen

exactement, dans votre environnement de production, votre volonté sera utilisée webpack -ppour créer vos actifs, et vos actifs devraient être servis par votre serveur d'applications ou votre serveur nginx au lieu du serveur webpack ou du middleware webpack, donc cette configuration n'est plus utile dans l'environnement de production, ai-je raison ?
Sean

7
Non, cette option est utile dans le serveur de développement, mais son intention est de charger de manière asynchrone des ensembles de scripts en production. Supposons que vous ayez une très grande application d'une seule page (par exemple Facebook). Facebook ne voudrait pas servir tout son javascript à chaque fois que vous chargez la page d'accueil, il ne sert donc que ce qui est nécessaire sur la page d'accueil. Ensuite, lorsque vous accédez à votre profil, il charge un peu plus de javascript pour cette page avec ajax. Cette option lui indique où sur votre serveur à partir duquel charger ce paquet
Charlie Martin

19

Vous pouvez utiliser publicPath pour pointer vers l'emplacement où vous souhaitez que webpack-dev-server serve ses fichiers "virtuels". L'option publicPath sera le même emplacement que l'option de création de contenu pour webpack-dev-server. webpack-dev-server crée des fichiers virtuels qu'il utilisera au démarrage. Ces fichiers virtuels ressemblent aux fichiers groupés créés par le webpack. Fondamentalement, vous souhaiterez que l'option --content-base pointe vers le répertoire dans lequel se trouve index.html. Voici un exemple de configuration:

//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 a créé un dossier de ressources virtuelles avec un fichier bundle.js virtuel auquel il fait référence. Vous pouvez tester cela en accédant à localhost: 8080 / assets / bundle.js, puis archivez votre application pour ces fichiers. Ils ne sont générés que lorsque vous exécutez le serveur webpack-dev.


Une si bonne explication, mais si je passe à la production ou que /build/bundle.jsje fais la construction à la main, je devrai changer le fichier srcdans mon index.htmlfichier, non?
ArchNoob

Désolé pour la réponse tardive. Vous n'avez pas besoin de changer le src. Que vous soyez en production ou en développement, webpack créera un bundle.js dans le chemin de sortie. Dans l'exemple ci-dessus, ce sera /build/bundle.js.
Isaac Pak

Merci, je pose des questions sur la srcligne du fichier index.html. En ce moment, il indique que "assets/bundle.js"s'il passe à la production, le bundle sera inclus, "build/bundle.js"donc je devrai le changer dans la ligne html src src="build/bundle.js". Ou existe-t-il un moyen plus automatisé?
ArchNoob

2
Je comprends votre question maintenant. Oui, vous devrez changer le src en build / bundle.js pour la production. Quant à un moyen automatisé de le faire, je n'en suis pas sûr. J'ai vu d'autres créer 2 fichiers webpack.config.js différents, un pour la production et un pour le développement. Il y a probablement une manière pragmatique comme si (ENV === production) le faisait ... mais je n'ai pas essayé cela.
Isaac Pak

@ArchNoob Juste un aperçu de la façon dont je fais cela en production maintenant. Je n'ai pas changé la valeur src mais à la place j'ai changé ma valeur publicPath de /assets/à /build. De cette façon, je n'ai pas à modifier mon index.html. J'ai également déplacé mon index.html hors du dossier de construction et dans la racine de l'application.
Isaac Pak

15

dans mon cas, j'ai un cdn, et je vais placer tous mes fichiers statiques traités (js, imgs, polices ...) dans mon cdn, supposons que l'url soit http://my.cdn.com/

donc s'il y a un fichier js qui est l'URL de référence d'origine en html est './js/my.js' il devrait devenir http://my.cdn.com/js/my.js dans l'environnement de production

dans ce cas, ce que je dois faire, c'est simplement définir publicpath est égal à http://my.cdn.com/ et webpack ajoutera automatiquement ce préfixe


Il ne semble pas ajouter de préfixe dans mon cas.
Param Singh

14

nom_fichier spécifie le nom du fichier dans lequel tout votre code groupé va être accumulé après être passé par l'étape de construction.

chemin spécifie le répertoire de sortieapp.js (nom de fichier) va être enregistré sur le disque. S'il n'y a pas de répertoire de sortie, webpack va créer ce répertoire pour vous. par exemple:

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

Cela va créer un répertoire myproject / examples / dist et sous ce répertoire, il crée app.js , /myproject/examples/dist/app.js . Après la construction, vous pouvez parcourir myproject / examples / dist / app.js pour voir le code fourni

publicPath: "Que dois-je mettre ici?"

publicPath spécifie le répertoire virtuel du serveur Web partir duquel le fichier fourni, app.js va être servi. Gardez à l'esprit que le mot serveur lors de l'utilisation de publicPath peut être soit webpack-dev-server, soit un serveur express ou un autre serveur que vous pouvez utiliser avec webpack.

par exemple

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

cette configuration indique à webpack de regrouper tous vos fichiers js dans examples / dist / app.js et d'écrire dans ce fichier.

publicPath indique à webpack-dev-server ou au serveur express de servir ce fichier groupé, par exemple examples / dist / app.js à partir de l'emplacement virtuel spécifié dans le serveur, c'est-à-dire / public / assets / js. Donc, dans votre fichier html, vous devez référencer ce fichier comme

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

Donc, en résumé, publicPath est comme le mappage entre virtual directoryvotre serveur et output directoryspécifié par la configuration output.path, chaque fois que la demande de fichier public / assets / js / app.js arrive, le fichier /examples/dist/app.js sera servi


2
bien expliqué!
Ganesh Pandey


2

publicPath est utilisé par webpack pour remplacer le chemin relatif défini dans votre css pour référencer l'image et le fichier de police.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.