Explication détaillée des avantages et des inconvénients de l'utilisation de Webpack path et publicPath

Cette fois, je vais vous donner une explication détaillée des avantages et des inconvénients de l'utilisation de Webpack path et publicPath Quelles sont les précautions lors de l'utilisation de Webpack path et publicPath. Voici des cas pratiques, jetons un coup d'œil. .

Préface

Lors du développement de webpackmodularisation, la configuration webpack.config.js a été découverte Le chemin de sortie du fichier a toujours un chemin et publicPath, je ne comprends pas sa signification.

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

Texte

Explication officielle

publicPath : Le chemin de sortie du vue de la page Javascript/HTML.

Chemin de sortie de la page JS/HTML

Ma compréhension

output.path vous enregistre dans le répertoire de fichiers local pour tous les fichiers de sortie. (Chemin absolu)

Par exemple :

path.join(dirname, “build/”)

webpack affichera tous les fichiers sur localdisk/path-to-your-project/build/

output.publicPath

L'emplacement de tous les fichiers packagés que vous téléchargez (par rapport au répertoire racine du serveur)

chemin : le répertoire de sortie utilisé pour stocker les fichiers packagés

publicPath : Spécifiez le répertoire référencé par le fichier de ressources

Utilisation : Par exemple, en express, public/dist est spécifié comme répertoire racine du site web, et les fichiers sources du site web sont stockés en public, puis vous devez définir le chemin : " ./dist" spécifie la sortie du package vers ce répertoire, et publicPath doit être défini sur "/", indiquant le chemin actuel.

publicPath dépend de l'emplacement du répertoire racine de votre site Web, car les fichiers packagés se trouvent tous dans le répertoire racine du site Web et les références à ces fichiers sont basées sur ce répertoire. Supposons que le répertoire racine du site Web est public et que le chemin de l'image référencée est « ./img.png ». Si le chemin public est « / », l'image ne peut pas être affichée car les images sont empaquetées et placées dans dist, alors vous avez besoin. pour définir le chemin public sur "/dist".

Par exemple :

/assets/

Supposons que vous déployiez ce projet sur le serveur http://server/

En modifiant output.publicPath Set vers /assets/, ce projet trouvera les ressources du webpack sur http://server/assets/.

Dans ce principe, tous les chemins liés au webpack seront réécrits pour commencer par /assets/.

src="picture.jpg" Re-writes ➡ src="/assets/picture.jpg"
Accessed by: (http://server/assets/picture.jpg)
src="/img/picture.jpg" Re-writes ➡ src="/assets/img/picture.jpg"
Accessed by: (http://server/assets/img/picture.jpg)

Important

Si vous utilisez style-loader ou CSS sourceMap, vous devez définir publicPath. Définissez-le sur le chemin absolu de l'adresse du serveur, tel que http://server/assets/, afin que les ressources puissent être chargées correctement.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Résumé des méthodes de transfert de données des composants parent-enfant de la classe de formulaire Vue

Résumé d'angular+ méthode de saut routerlink

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!