web-dev-qa-db-fra.com

Que fait "publicPath" dans Webpack?

Documents Webpack déclarez que output.publicPath est:

Le output.path de la vue de JavaScript.

Pourriez-vous préciser ce que cela signifie réellement?

J'utilise output.path et output.filename pour spécifier où Webpack doit afficher le résultat, mais je ne suis pas sûr de ce qu'il faut mettre dans output.publicPath et si cela est nécessaire.

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

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 fournis. (relatif à 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 les actifs de Webpack à l'adresse: http://server/assets/. Sous le capot, chaque URL rencontrée par le WebPack sera réécrite pour commencer par "/assets/".

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

Consulté par: (http://server/assets/picture.jpg)

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

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

99
Kevin Law

Lorsqu'il est exécuté dans le navigateur, Webpack doit savoir où vous allez héberger le paquet généré. Ainsi, il est possible de demander des fragments supplémentaires (en utilisant division du code ) ou des fichiers référencés chargés via le chargeur de fichiers ou rl-loader .

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

60
Johannes Ewald

publicPath est simplement utilisé à des fins de développement, J’ai confondu la première fois que j’ai vu cette propriété de configuration, mais c’est logique maintenant que j’utilise Webpack depuis un moment

supposons que vous placiez tout votre fichier source js dans le dossier src et que vous configuriez votre pack Web pour construire le fichier source dans le dossier dist avec output.path.

Mais vous voulez servir vos actifs statiques dans un emplacement plus significatif comme webroot/public/assets, vous pouvez utiliser cette fois out.publicPath='/webroot/public/assets' pour pouvoir référencer votre js avec <script src="/webroot/public/assets/bundle.js"></script>.

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

Mise à jour:

merci à Charlie Martin de corriger ma réponse

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

Non, cette option est utile sur le serveur de développement, mais son objectif est de charger de manière asynchrone des ensembles de scripts en production. Supposons que vous ayez une très grande application à une seule page (par exemple Facebook). Facebook ne voudrait pas utiliser tout son code 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 indique où sur votre serveur charger cet ensemble.

49
Sean

Vous pouvez utiliser publicPath pour indiquer l'emplacement où vous voulez que webpack-dev-server serve ses fichiers "virtuels". L'option publicPath aura le même emplacement que l'option content-build 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 Webpack. En gros, vous souhaiterez que l'option --content-base pointe vers le répertoire dans lequel se trouve votre index.html. Voici un exemple d'installation:

//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 d'actifs virtuels 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 en archivant votre application pour ces fichiers. Ils ne sont générés que lorsque vous exécutez webpack-dev-server.

17
Isaac Pak

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 est http: //my.cdn. com /

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

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

13
Kent Wood

La documentation de webpack2 explique cela d'une manière beaucoup plus claire: https://webpack.js.org/guides/public-path/#use-cases

webpack a une configuration extrêmement utile qui vous permet de spécifier le chemin de base pour tous les actifs de votre application. Cela s'appelle publicPath.

3
Alan

nom du fichier spécifie le nom du fichier dans lequel tout votre code fourni va être accumulé après avoir franchi l'étape de la construction.

chemin spécifie le répertoire de sortie où le app.js (nom du 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 créera un répertoire myproject/examples/dist et sous ce répertoire, il créera app.js, / myproject/examples/dist/app.js =. Après la construction, vous pouvez naviguer vers myproject/examples/dist/app.js pour voir le code fourni.

publicPath: "Que dois-je mettre ici?"

publicPath spécifie le répertoire virtuel dans serveur Web à partir duquel le fichier fourni, app.js va être servi. Gardez à l'esprit que le serveur Word utilisé avec publicPath peut être Webpack-dev-server, 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 à un serveur express de servir ce fichier fourni, à savoir examples/dist/app.js à partir de l'emplacement virtuel spécifié dans serveur c'est-à-dire/public/assets/js. Donc, dans votre fichier html, vous devez référencer ce fichier en tant que

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

Donc, en résumé, publicPath est comme un mappage entre virtual directory sur votre serveur et output directory spécifié par la configuration de output.path, Chaque fois que la demande de fichier public/assets/js/app.js vient, / examples/dist/app.js le fichier sera servi

1
udeep shrestha

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

1
Khalid Azam