Que fait «publicPath» dans Webpack?

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?"   
  } 
}

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)

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/"

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

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.

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

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 sortie où app.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

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

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

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.