web-dev-qa-db-ja.com

HTMLWebpackPluginを使用するときにwebpackを介して画像をロードする方法は？

HTMLWebpackPluginを使用しており、テンプレートにimgタグがあります。

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

あなたが気づいたなら、ここではwebpackがwebpack.config.jsファイルで設定されているファイルローダーをトリガーする相対パスを使用していますが、コンパイル後にhtmlでまったく同じsrc属性を取得します：

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

これらの相対パスを動的に置き換えるためにwebpackをトリガーするにはどうすればよいですか？

javascriptnode.jswebpackhtml-webpack-plugin
19
Anonymous

私はウェブパックの専門家ではありませんが、これを行うことで動作するようになりました

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

プラグイン構成

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

ドキュメントによると： https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md

デフォルトでは（何らかの方法でローダーを指定しない場合）、フォールバックlodashローダーが起動します。

<%= %>はlodashテンプレートを示します

内部では、メイン構成からすべてのローダーを継承するwebpack子コンパイルを使用しています。

Imgパスでrequireを呼び出すと、ファイルローダーが呼び出されます。

パスの問題が発生する可能性がありますが、動作するはずです。

21
Eric Guan

HTML webpackプラグインでhtml-loaderを使用するとうまくいきました。

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

CopyWebpackPluginを使用する必要があります。

const CopyWebpackPlugin = require('copy-webpack-plugin');

plugins:[
    ....
    new CopyWebpackPlugin([
         {from:'./src/assets/images',to:'images'} 
     ]),
    ....
]

これはsrc/assets/imagesを「distfolder/images」に。

3
Voro

Webpack構成でurl-loaderを使用して、最終バンドルでbase64 uriとしてエンコードされた特定の制限以下の画像を追加し、制限を超える画像を通常の画像タグとして（publicPathに対して）追加できます。

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