Zenn
📚

【webpack】html-webpack-plugin で画像を表示させる方法

2023/01/23に公開
HTML
webpack
tech

はじめに

html-webpack-plugin を導入した際の画像を表示させる方法を共有します。
html-webpack-plugin で画像を表示させる方法がドキュメントには記載されていなかったため、同様に悩んでいる方がいればと思いこの記事を書きました。

前提

この記事は webpack を既に使用している方を対象としております。

具体的にどんな不具合が起きたか

画像の表示については、ごく普通に <img src="/logo.png" > と書いておりました。
ただこれだと build をした際になぜか画像が表示されませんでした。build した HTML の画像パスを確認するとうまくパスが反映されていないようでした。

ちなみに、開発環境では問題なく表示されておりました。（開発サーバーは、webpack-dev-server を使用）

結論を見る

環境（参考）

パッケージのバージョン一覧（一部抜粋）
package.json（一部抜粋）
"devDependencies": {
  "file-loader": "^6.2.0",
  "html-loader": "^4.1.0",
  "html-webpack-plugin": "^5.5.0",
  "webpack": "^5.74.0",
  "webpack-cli": "^4.10.0",
  "webpack-dev-server": "^4.10.0",
},

画像の表示方法（GitHub Issues 抜粋）

下記の GitHub Issues には、「画像を表示させる方法は3つある」と書かれています。

https://github.com/jantimon/html-webpack-plugin/issues/1591#issuecomment-770654603

1. html-webpack-plugin の使用（デフォルト）

By default the html-webpack-plugin is using the a loader with lodash template syntax - to make the loader aware of the image you can use this syntax: <img src="<%= require('./logo.png') %>">

【意訳】デフォルトでは、html-webpack-plugin は lodash テンプレート構文によるローダーを使用しています。ローダーに画像を認識させるには、<img src="<%= require('./logo.png') %>">" という構文が使えます。

こちらは少し特殊な書き方をする必要があります。コチラで解説しています。
build 時に画像パスを解決してくれるのがメリットです。また html-loader の機能を使って、header や footer の共通化をすることも可能です。

■ html-webpack-plugin ドキュメント

2. html-loader の使用

Another option is to use a different webpack loader which supports automatic html parsing and resource loading - one example for that is the html-loader

【意訳】もう一つの方法は、別の webpack ローダー（自動的な html の解析とリソースの読み込みをサポートするもの）を使用することです。そのための一例として、html-loader があります。

こちらは html-webpack-plugin のような特殊な書き方をせずに、<img src="/logo.png" > と記述すれば画像が表示されます。ただ webpack の設定が必要になります。
また、html-webpack-plugin で記述した header や footer の共通化はできません。

■ html-loader ドキュメント

3. copy-webpack-plugin の使用

The third option is to use the copy-webpack-plugin to copy the files to the dist folder

【意訳】3つ目の方法は、copy-webpack-plugin を使用してファイルをdistフォルダにコピーする方法です。

こちらのプラグインは、開発環境から丸ごとビルド環境にファイルを移すというやり方です。
ただ丸ごとコピーするプラグインなので、build 時に細かい処理を走らせたい場合は適当ではありません。

■ CopyWebpackPlugin ドキュメント

画像の表示のさせ方（html-webpack-plugin）

html-webpack-plugin を使用した方法のみご紹介いたします。
※ html-loader と copy-webpack-plugin を使用した方法は、今回の趣旨から外れてしまうため割愛します。

先ほどご紹介した GitHub Issues には、解決方法として「<img src="<%= require('./logo.png') %>"> と記述すれば画像を表示させることができる」と書いてありました。ただ私の環境では、動きませんでした。

正常に動くコードは下記のように記述します。
括弧の後ろに .default を付与することで画像が表示されました。

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

参考記事: Webpack file-loader outputs [object Module] (stack overflow)

注意点

今回は以上となります。
ここまでお読みいただき、ありがとうございました🙏

Discussion