reactで画像の読み込みをできるようにwebpackにurl-loaderを入れる

webpackで構成したReactのプロジェクトで画像を配置して読み込みたい。

htmlのノリで普通にimgタグにsrc=""としても画像は読み込まれないですよね。配置した画像を読み込ませるためにはfile-loaderをインストールしてwebpack.config.jsをいじらなくてはいけません。

file-loaderをインストール

まずは、file-loaderを入れます。

npm install --save-dev file-loader

file-loaderについては、githubのReadmeにも書いてあるので、見てみると良いです。

github.com

webpack.config.jsを編集する

loaderとして新たにインストールしたfile-loaderを使いたいので、追加します。

{ 
  test: /\.(png|jpg|gif)$/,
  loader: 'file-loader',
  options: {},
}

これをwebpack.config.jsに追記します。

module.exports = [
  {
    entry: [
      './src/index.jsx',
    ],
    output: {
      path: publidDir,
      publicPath: '/',
      filename: 'bundle.js',
    },
    module: {
      rules: [{
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015'],
          },
        },
        {
          test: /\.(png|jpg|gif)$/,
          loader: 'file-loader',
          options: {},
      }],
    },
・・・

moduleのなかに記述しておきましょう。追記したら、きちんと動くかどうかアプリケーションを動かして見て確認してみることをおすすめします。