Reactのファイルでwebpackを使用すると、JSX部分でエラーが発生してしまいます。

前提・実現したいこと

現在、一つのファイルに複数のクラスが存在している状態です。クラスごとにファイルを分けて、webpackを使おうとしたら、以下のエラーが発生しました。

発生している問題・エラーメッセージ

ERROR in ./src/app/app.js 7:15
Module parse failed: Unexpected token (7:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     render()
|     {
>         return(<div>
|             <Input />
|         </div>);

webpack.config.jsを変更後↓

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   -> Options affecting the normal modules (`NormalModuleFactory`).

該当のソースコード

JavaScript
1import React, {Component} from 'react';
2
3export default class Sample extends Component
4{
5    render()
6    {
7        return(<div>
8            <Input />
9        </div>);
10    }
11}
12

const path = require('path');

module.exports = {
    entry: "./src/app/app.js",
    output: {
        path: path.join(__dirname, 'src/app'),
        filename: "bundle.js"
    },
    module: {
        loaders: [{
            test: /.js?$/, // 拡張子がjsなのでjsxから変更
            exclude: /node_modules/, // node_modulesフォルダ配下でなければ
              loader: 'babel', // babel-loaderを使って変換する
              query: {
                plugins: ["transform-react-jsx"] // babelのtransform-react-jsxプラグインを使ってjsxを変換
            }
        }]
    }
}