webpackで画像を読み込む

webpack

前回は画像を扱いましたが、こちらで書いた構成だとエラーになってしまいます。

問題箇所

このCSSの、url指定で読み込んでいる画像でエラーが起きます。 対応するloaderが入っていないと駄目みたいです。

.first-form {
  background: url("../images/freeza-first.jpg");
  width: 400px;
  height: 232px;
}

.second-form {
  background: url("../images/freeza-second.jpg");
  width: 280px;
  height: 300px;
}

.third-form {
  background: url("../images/freeza-third.jpg");
  width: 200px;
  height: 288px;
}

.fourth-form {
  background: url("../images/freeza-fourth.jpg");
  width: 280px;
  height: 460px;
}

その1: url-loaderを使う

jpgを扱う場合、moduleのlordersに下記のように追加すれば利用できます。

  • webpack.config.js
module: {
  loaders: [
      { test: /\.jpg$/, loader: "url-loader?mimetype=image/jpg" }
    ]
  }

無事に画像もエラー無くwebブラウザで表示されますが...

Developper Toolsで確認すると

.first-formの場合、

.first-form {
    background: url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAcFBQYFBAcGBQYIBwcIC…J2dcarOm4Pry3onp2eau1hA2HazqJousbZeUP4KBeqEqfSFjgT2NIk2wq1btx55YYzj/K5/9k=);
    width: 400px;
    height: 232px;
}

画像がBASE64エンコードされてしまい、ファイル名がこんな文字列になってしまいます。 data URI schemeというらしいですが、短所も結構あるし、普通のファイルとしても扱いたいところです。

その2: file-loaderを使う

こちらもjpgの例です。

  • webpack.config.js
module: {
  loaders: [
      { test: /\.jpg$/, loader: "file?name=[path][name].[ext]" }
    ]
  }

(file?nameの後の書き方はgithubのExampleにあります)

こうするとwebpackが画像をビルドしてくれますが、プロジェクトのルートディレクトリに画像が出来上がってしまうので、"build"というディレクトリに出力するようにしました。

module: {
  loaders: [
      { test: /\.jpg$/, loader: "file?name=build/[path][name].[ext]" }
    ]
  }

ついでに、 bundle.jsも"build"ディレクトリに出すようにすれば、webpackでビルドされたものがまとまって良い感じになります。

  • webpack.config.js
module.exports = {
  entry: './js/app.js',
  output: {
    path: __dirname,
    filename: 'build/js/bundle.js'
  },
  module: {
    loaders: [
      { test: /\.html$/, loader: 'html?minimize' },
      { test: /\.css$/, loader: "style!css" },
      { test: /\.jpg$/, loader: "file?name=[path][name].[ext]" }
    ]
  }
};