La différence entre le chemin Webpack et publicPath utilise l'analyse

Cette fois, je vais vous apporter une analyse de la différence entre Webpack path et publicPath Quelles sont les précautions concernant la différence entre Webpack path et publicPath Voici un cas pratique, 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 regroupées dans dist, vous devez alors définir. le chemin public vers "/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)

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 :

Un résumé de la méthode d'utilisation de JS pour déterminer le contenu contenu dans une chaîne

JS + Liaison de souris réelle HTML5 Animation de particules d'événements

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!