web-dev-qa-db-fra.com

Comment charger des images via Webpack avec HTMLWebpackPlugin?

J'utilise HTMLWebpackPlugin et dans mon modèle, j'ai une balise img:

<img src="./images/logo/png">

Si vous remarquez que je suis en train d'utiliser un chemin relatif, Webpack déclenche le chargeur de fichiers configuré dans mon fichier webpack.config.js mais, après la compilation, le même attribut src apparaît exactement dans mon code HTML: 

<img src="./images/logo/png">

Comment puis-je déclencher webpack pour remplacer dynamiquement ces chemins relatifs par, enfin, tout ce que j'ai configuré dans la configuration de mon webpack?

javascriptnode.jswebpackhtml-webpack-plugin
11
Anonymous

Je ne suis pas un expert du Webpack, mais je l'ai mis au travail en le faisant.

<img src="<%=require('./src/assets/logo.png')%>">

Configuration du plugin

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html'
  }),

Selon les documents: https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md

Par défaut (si vous ne spécifiez aucun chargeur de quelque manière que ce soit), une solution de secours chargeur lodash entre en jeu.

Le <%= %> signifie un modèle de lodash

Sous le capot, il utilise une compilation enfant Webpack qui hérite de tous les chargeurs de votre configuration principale.

L'appel de require sur votre chemin img appellera alors le chargeur de fichiers.

Vous pouvez rencontrer des problèmes de chemin, mais cela devrait fonctionner.

16
Eric Guan

Utiliser html-loader avec le plugin HTML webpack a fonctionné pour moi.

module: {
    rules: [
      {
         test: /\.(html)$/,
         use: ['html-loader']
      }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
0
Norma Mendonca

Vous pouvez utiliser url-loader dans la configuration de votre pack Web pour ajouter des images inférieures à une certaine limite, codées sous la forme d'URI base64 dans votre bundle final, et des images supérieures à la limite sous forme de balises d'image standard (par rapport à publicPath)

module.rules.Push({
  test: /\.(png|jp(e*)g|gif)$/,
  exclude: /node_modules/,
  use: [{ 
    loader: 'url-loader',
    options: {
      limit: 10000,
      publicPath: "/"
    }
  }]
})
0
varoons