Comment gérer les erreurs d'empaquetage du webpack causées par les chemins d'image

Cette fois, je vais vous expliquer comment gérer les erreurs d'emballage du webpack causées par les chemins image Quelles sont les précautions lors du traitement des chemins d'image provoquant des erreurs d'emballage du webpack. cas. Jetons un coup d'oeil.

J'ai récemment rencontré un tel problème lorsque je créais mon propre blog personnel. J'ai utilisé un chemin relatif en CSS pour servir d'image d'arrière-plan, comme indiqué ci-dessous :

Après avoir empaqueté l'intégralité du projet à l'aide de webpack, une erreur a été signalée lors de son exécution sur le navigateur. L'erreur était la suivante :

En d'autres termes, l'image. Le fichier est introuvable après l'emballage. Nous y sommes, alors quelle est la raison ? Jetons d'abord un coup d'œil à ma configuration dans le fichier webpack.config.js :

En fait. , mon chargeur n'est pas utilisé de manière incorrecte ici. Oui, l'image correspondante est traitée à l'aide de url-loader. Jetons ensuite un œil au répertoire après emballage via webpack :

Nous. a constaté que nous voulons le conditionner dans le dossier dist. Un fichier build.js est généré, et un fichier image supplémentaire est également généré. Ce fichier est l'image d'arrière-plan que nous venons de spécifier en CSS

. via le message d'erreur du navigateur, build.js L'adresse de l'image spécifiée pour nous est évidemment incorrecte. Par défaut, le processus d'empaquetage

copiera l'image utilisée et la placera dans le répertoire spécifié par le chemin du. sortie Cependant, dans build.js Le chemin de l'image référencé par

est bien le répertoire racine de l'ensemble du fichier de projet, donc la référence naturelle

n'est pas utilisée. Alors, comment doit-il être géré. ? Dans le fichier webpack.config.js, objet de sortie

Spécifiez l'attribut publicPath dans , qui est utilisé pour spécifier l'adresse de publication des ressources statiques (images, etc.). Lorsque cet attribut est configuré, le fichier est empaqueté (c'est-à-dire build.js) Toutes les ressources référencées par des chemins relatifs seront remplacées par les chemins configurés. Par conséquent, en définissant comme ceci, le chemin référençant l'image dans build.js ajoutera le chemin spécifié par publicPath après le chemin vers le répertoire racine initial, nous ajoutons donc

Le contenu dans la case rouge de l'image ci-dessous est suffisant :

Ensuite, vous pouvez enfin l'exécuter le dossier dist J'ai trouvé l'image générée !

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 :

Comment Webpack introduit dynamiquement les fichiers

Que faut-il faire avec Webpack pour empaqueter les fichiers JS spécifiés

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!