React.js/JSX・Electron・webpack4のビルド　loaderエラー

2017/08発行の「いまどきのJSプログラマーのためのNode.jsとReactアプリケーション開発テクニック」（クジラ飛行机　著）の第4章「Electronを使ってみよう」のコードを写経しています。

まず、フォルダ'electron_hello'を作成し、electron, react, react-dom, babel-core, babel-preset-es2015, babel-preset-reactをnpmでインストールしました。

です。
Electronでpackage.jsonを参照し、main.jsを実行します。outディレクトリにコンパイルされたファイルが出力されるようにしたいです。
写経の元の本がwebpack3対応のものなのでwebpack4に対応するように書き換えているのですがうまくいきません。

npm run build でビルドしようとしたところ以下のエラーが出ました。

ERROR in ./src/index.js
Module parse failed: Unexpected token (6:15)
You may need an appropriate loader to handle this file type.
| export default class App extends Component{
| render(){
| return(<div>
| <h1>Hello</h1>
| </div>)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! electron_hello@1.0.0 build: webpack
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the electron_hello@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

index.jsのコード

JavaScript
1import React, {Component} from 'react'
2import ReactDOM from 'react-dom'
3
4export default class App extends Component{
5    render(){
6        return(<div>
7            <h1>Hello</h1>
8                </div>)
9    }
10}
11
12ReactDOM.render(
13<App />, 
14document.getElementById('root')
15)

webpack.config.jsのコード

JavaScript
1const path = require('path')
2const webpack = require('webpack')
3
4module.export = {
5    mode: 'production',
6    entry: {
7    'index': [
8      path.resolve(__dirname, 'src/index.js')
9    ]
10  },
11  output: {
12    filename: '[name].bundle.js',
13    path: path.resolve(__dirname, 'public'),
14    publicPath: '/'
15  },
16    devtool: 'cheap-module-eval-source-map',
17    target: 'node',
18    module: {
19     rules: [
20      {
21        test: /.(js|jsx)$/,
22        use: 'babel-loader'
23      }
24     ],
25     resolve: {
26        extensions: ['.js', '.jsx','*']
27     }
28  },
29    plugins: [
30      new webpack.DefinePlugin({
31      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
32    })
33    ]
34}

package.jsonのコード

json
1{
2  "name": "electron_hello",
3  "version": "1.0.0",
4  "description": "",
5  "main": "main.js",
6  "scripts": {
7    "start": "electron .",
8    "build": "webpack"
9  },
10  "keywords": [],
11  "author": "",
12  "license": "ISC",
13  "devDependencies": {
14    "babel-core": "^6.26.0",
15    "babel-loader": "^7.1.4",
16    "babel-polyfill": "^6.26.0",
17    "babel-preset-es2015": "^6.24.1",
18    "babel-preset-react": "^6.24.1",
19    "electron": "^1.8.4",
20    "react": "^16.2.0",
21    "react-dom": "^16.2.0",
22    "webpack": "^4.1.1",
23    "webpack-cli": "^2.0.13"
24  }
25}
26

エラー中に
You may need an appropriate loader to handle this file type.
とあったので、ローダーのインストールが出来ているか確認しました。
しかし、package.jsonのdevDependencies中にあるものは全てnode_mojulesのフォルダ内にあるようです。

エラーの原因は他にあるのでしょうか？

webpackでのビルド自体が初めてなので、package.jsonなどもとりあえず写している段階で理解しきれていません。
他に確認すべき点があれば教えてください。