webpackでmoduleが読み込めない(Module not found: Error)

Question

Rails上でreactを動かすのに、こちらの記事を参考に/client以下にwebpack環境を置いて、webpackでビルドした結果を/app/assets/javascripts/webpack/に配置したのですが、componentを描画しようとすると、Module not found: Error: Cannot resolve 'file' or 'directory' /components/favorite_boxと表示されてしまいます。以下が各ファイルの中身になっています。どこが間違っているのか教えていただけると幸いです。どうぞよろしくお願いいたします。

ファイル構成

client
├─ src
│   ├ components
│   │    └─ favorite_box.js.jsx
│   └─index.js
├─ node_modules
├─ package.json
└─ webpack.config.js

各ファイル

// favorite_box.js.jsx
import React from 'react'
import ReactDOM from 'react-dom'

export default class FavoriteBox extends React.Component {
 // (中略)

  render() {
    return (
      <div className="FavoriteBox">
      </div>
    )
  }
}

// index.js
import React from 'react'
import ReactDOM from 'react-dom'

import FavoriteBox from './components/favorite_box.js.jsx'

ReactDOM.render(
  <FavoriteBox/>,
  document.getElementById('favorite_box')
)

// webpack.config.js
module.exports = {
  entry: {
    app: './src/index.js',
  },

  output: {
    path: '../app/assets/javascripts/webpack',
    filename: '[name].js',
  },

  module: {
    loaders: [
      { test: /\.(js|jsx)$/,
        loader: "babel",
        exclude: /node_modules/,
        query: {
          presets: ["es2015", "react"],
        }
      },
    ]
  },
}

// package.json
{
  "private": true,
  "scripts": {
    "webpack-watch": "webpack -w",
    "webpack-build": "webpack -p"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "webpack": "^1.13.1"
  },
  "dependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1"
  }
}

Answer 1

webpackバージョン2よりmoduleの書き方が変わりました。
バージョン2以上をお使いの場合、以下サイトを参考に書き換える必要があります
https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules
と
https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed