Comment packager des images en HTML ? Comment empaqueter des images HTML

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

Installation du projet : npm install –save-dev webpack

Installation globale : npm install -g webpack

** 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

Emballez les images en html :

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="/static/imghwm/default1.png"  data-src="./images/10.jpg"  class="lazy"   alt="Comment packager des images en HTML ? Comment empaqueter des images HTML" ></p>

Install ==html-withimg. -loader== pour résoudre le problème de

en html

 npm install html-withimg-loader –save

Configurer le chargeur (webpack-config.js)

{    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}

Package à nouveau, et l'img l'image apparaît dans le répertoire dist/images

npm run server Afficher le navigateur

Recommandations associées :

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!