静的サイト作成時にwebpackでの画像の取扱をどうするか悩んだ

今まではタスクランナーはgulpを使っていたのだが、
webpackいいよ的な記事をよく見かけるようになったのと、
githubのコミットが盛んとのことで最近はもっぱらwebpackを使っている。
(javascriptのモジュール化が簡単そうだと思ったのも一因ではある)

導入当初はAngularJSも同時に学んじゃおう的な軽い気持ちで始めたせいか、
盛大にハマりまくっていたがまずはwebpackからということで進め一応動かせる状態にはなれた。

しかし、
画像を使おうと思ったときにどうするのがベストプラクティスか迷った。

ざっくりなディレクトリ構成

.
├── package.json
├── public
│   ├── app.bundle.js
│   ├── commons.js
│   ├── contact.bundle.js
│   ├── contact.html
│   └── index.html
├── src
│   ├── app.js
│   ├── contents
│   │   ├── about.js
│   │   ├── contact.js
│   │   ├── member.js
│   │   ├── services.js
│   │   └── top.js
│   ├── html
│   │   ├── about.html
│   │   ├── member.html
│   │   ├── services.html
│   │   └── top.html
│   ├── modules
│   │   ├── contents_judge.js
│   │   └── menu.js
│   └── scss
│       ├── common.scss
│       ├── header.scss
│       ├── reset.scss
│       └── top.scss
└── webpack.config.js

思いついた選択肢としては下記だ。

  1. public/にimage/を切る
  2. src/にimage/を切り、jsでimportして使う
  3. src/にimage/を切り、publicにdistされるようにする

極力手を加えるファイルはsrc/に集約したかったのと、
ただ画像を使うだけの為にjsでimportして煩雑かつ重くしたくなかったので"3"でやることにした。

※追加したモジュール
glob
file-loader
img-loader

基本的に問題なく進んだが、一時ゴリゴリにエラーログが出て驚いた。
下記エラーログの一部。

ERROR in multi ./images/handshake.png ./images/illust_saito.png ./images/illust_seki.png ./images/pc_sp.png ./images/report01.png
Module not found: Error: Can't resolve 'file' in '/Users/kit/Source/nikakeru/src'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'file-loader' instead of 'file',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
 @ multi ./images/handshake.png ./images/illust_saito.png ./images/illust_seki.png ./images/pc_sp.png./images/report01.png

webpackがいつだかのバージョンからloader周りを省略して書くことを禁じていることを忘れていた。
新し目の技術は楽しいがこういうちょっとした点でどハマりすることが多々あり普通に嫌だ。

エラーログがGoogle翻訳使わなくてもすっと入ってくればもっと楽なのだろうか…。
英語をもっと勉強しようと思う…。

※参考にさせて頂いたサイト(ありがとうございました。)
Babel, PostCSSで静的サイトを作るためのwebpackの基本構成 | Sofar