Le contenu de cet article explique comment empaqueter des images en HTML ? La méthode de conditionnement des images HTML a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.
Webpack n'aime pas que vous utilisiez la balise pour introduire des images, mais nos front-end sont particulièrement friands de cette méthode d'écriture, et les chinois en ont également développé une pour cela : html -withimg- chargeur. Il peut très bien gérer le problème de l'introduction d'images en HTML
** Webpack n'encourage pas l'installation globale de webpack Si vous utilisez webpack pour empaqueter des projets dans le terminal, certaines commandes ne seront ni internes ni externes.
Vous devez configurer l'option de script dans package.json Nous avons appris à configurer la commande webpack-dev-server dans les cours précédents, sous cette commande, nous ajouterons une commande build. pour empaqueter le projet. Utilisez
"scripts": { "server": "webpack-dev-server --open", "build":"webpack" },
pour supprimer le répertoire dist et npm exécutez build pour empaqueter
Passez maintenant à ==npm run build ==Les images empaquetées ne sont pas placées dans le répertoire dist/images Vous devez configurer l'option url-loader
module:{ rules: [ { test: /\.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) },{ test:/\.(png|jpg|gif)/ , use:[{ loader:'url-loader', options:{ limit:5000, outputPath:'images/', } }] } ] },
pour supprimer le répertoire dist et effectuer <🎜. >npm run build packaging Vous pouvez empaqueter les images dans Sous le dossier images
insérer des images dans index.html dans le répertoire src<p><img src="./images/10.jpg"></p>
en html
npm install html-withimg-loader –save
{ test: /\.(htm|html)$/i, use:[ 'html-withimg-loader'] }
Comment gérer les erreurs d'empaquetage du webpack causées par les chemins d'image
Parfois, le CSS fait référence à des images après l'emballage. Pourquoi le fichier de ressources est introuvable
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!