браузер выдает ошибку ключевого слова экспорта / импорта, даже если установлен webpack и babel

Я разрабатываю очень простое и простое приложение с основным javascript и html. Я установил webpack v 4 и запустил сервер, используя

npm run webpack

проект успешно скомпилирован; ниже вывод

> [email protected] webpack /opt/parixan/canvas
> webpack-dev-server --inline --hot

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣: Hash: 99985e9b8632c783a375
Version: webpack 4.12.1
Time: 819ms
Built at: 2018-06-30 18:45:48
        Asset     Size  Chunks             Chunk Names
    bundle.js  354 KiB    main  [emitted]  main
bundle.js.map  406 KiB    main  [emitted]  main
Entrypoint main = bundle.js bundle.js.map
[./js/color.js] 359 bytes {main} [built]
[./js/index.js] 628 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/sockjs-client/dist/sockjs.js] 176 KiB {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.75 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[0] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./js/index.js 52 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.6 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1010 bytes {main} [built]
    + 14 hidden modules
ℹ ｢wdm｣: Compiled successfully.

но когда я перехожу на localhost: 8080 / алфавит.html, он выдает ошибку в консоли

Uncaught SyntaxError: Неожиданный экспорт токена. алфавит.js: 30

Я также заметил, что в папке build нет файла bundle.js, как упоминалось в webpack.config.js

вот моя структура папки

├── README.md
├── alphabet.css
├── alphabet.html
├── build
├── fruits
├── js
      ├── alphabet.js
      ├── color.js
      └── index.js
├── .babelrc
├── package.json
└── webpack.config.js

• узел -v 8.9.2
• npm -v 5.5.1
• macOS -v 10.13.3
• babel --version
  6.26.0 (babel-core 6.26.3)

.babelrc

{
    "presets": ["@babel/preset-env"]
}

package.json

 "scripts": {
    "webpack": "webpack-dev-server --inline --hot",
    "start": "http-server"
  },
  "main": "./js.index.js",

  "devDependencies": {
    "@babel/core": "^7.0.0-beta.51",
    "babel-loader": "^8.0.0-beta.4",
    "babel-register": "^6.26.0",
    "jsxobj": "^1.1.0",
    "webpack": "^4.12.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-node-externals": "^1.7.2"
  },
  "dependencies": {
    "@babel/preset-env": "^7.0.0-beta.51",
    "babel-eslint": "^7.2.3",
    "babel-preset-es2015": "^6.24.1",
    "path": "^0.12.7"
  }

webpack.config.js

module.exports = {
  context: __dirname,
  entry: "./js/index.js",
  mode: "development",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      }
    ]
  },
  devtool: "source-map",
  resolve: {
    extensions: [".html", ".js", ".json", ".css"]
  }
};

/js/index.js

import { fetchImage } from "./alphabet.js";
import { color } from "./color.js";


const colorBox = color;
console.log("colorBox", colorBox);

const len = Object.keys(colorBox).length;

fetchImage(colorBox);

js / алфавит.js

export const fetchImage = letter => {
  const fruit = fruits[letter] || "tamarindo";
  const request = new Request(`./fruits/${fruit}.png`, myInit);
  fetch(request)
    .then(response => response.blob())
    .then(blob => {
      const objectURL = URL.createObjectURL(blob);
      const img = new Image(200);
      img.src = objectURL;
      let element = document.getElementById("figure");
      while (element.firstChild) {
        element.removeChild(element.firstChild);
      }
      element.appendChild(img);
    });
};

Мое главное сомнение по поводу этого файла алфавит.html

алфавит.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Alphabet</title>
   <link rel="stylesheet" href="./alphabet.css">
</head>
<body>
    <div class="content" >
    <section class="alphabet"></section>
    <figure id="figure"></figure>
</div>
<script  src="./js/alphabet.js"></script>
</body>
</html>

Если я изменю <script src="./js/index.js">, он выдаст ошибку

Uncaught SyntaxError: Неожиданный токен {

т.е. ключевые слова import и export не распознаются

Как решить эту проблему?