web-dev-qa-db-fra.com

Comment utiliser webpack avec des fichiers images statiques?

J'utilise Webpack pour regrouper des fichiers .vue, qui utilisent import et export. Webpack crée un Nice bundle.js et tout va bien.

MAIS lorsque mon fichier Vue mentionne une image, par exemple:

<div>
     <img src='./images/thing.png'>
</div>

.style {
   background: url('./images/anotherthing.png');
}

Maintenant, tout à coup, cette image doit également se trouver dans mon dossier dev. Webpack souhaite copier TOUS mes fichiers image chaque fois que je mets à jour un caractère dans un fichier javascript. De plus, TOUTES mes images ne sont pas importées de cette façon. Je dois donc copier manuellement certains fichiers dans le dossier dist. Webpack copie également certains fichiers ... 

Puis-je dire à Webpack de ne pas regrouper de fichiers images statiques qui ne changent jamais? Est-ce même recommandé? 

javascriptwebpackvue.js
6
Kokodoko

Webpack a un file-loader qui gérera la copie des dépendances statiques et la résolution correcte de leurs URL:

https://webpack.js.org/loaders/file-loader/

Voici une discussion plus approfondie sur les images: https://webpack.js.org/guides/asset-management/#loading-images

2
Adrian Smith

Vous pouvez utiliser une extension de fichier différente pour traiter certaines images différemment. Assurez-vous d'inclure le ignore-loader avant le chargeur de fichiers:

{ test: /ignore\.(png|jpg|gif|svg)$/, loader: 'ignore-loader' },
{ test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } }

Puis incluez votre image en utilisant l’extension préfixée:

<img src='./images/thing.ignore.png'>

Vous devrez également renommer le fichier en thing.ignore.png. 

1
sidhuko

Supposons que nous ayons la structure suivante: - public/ - dist/ - static/ - src/ - webpack.config.js Vous pouvez conserver vos images statiques dans le répertoire static et tous les fichiers générés par webpack dans le répertoire dist. Définissez le répertoire webpack sur src. Webpack fonctionnera avec uniquement le répertoire src et vos fichiers statiques seront séparés de webpack.

Et utilisez webpack watch: true. Webpack ne compilera que le code modifié, pas tous les projets.

0
Martin