Почему React webpack-dev-server выдаёт ошибку «Не найден bundle.js»?

Вы не создали webpack.config.js поэтому и видите ошибку о том, что файл bundle.js не найден, по причине того, что его никто не создал. Рекомендую внести следующие правки в package.json:

{
  "name": "react-project-hello",
  "version": "1.0.0",
  "description": "A sample React project to demonstrate how to set up env for React",
  "author": "Alex Park",
  "license": "MIT",
  "private": false,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production",
  }
}

На что обратить внимание:

• Убрал "main": "index.js" - если у нас webpack, то это указывать уже ни к чему.
• Скрипт start - здесь есть небольшая корректива, если уж идти правильным путем, то запуск по-хорошему - это работа dev-версии, для текущей отладки, а вот построение - это как раз продакшн. Не знаю как у других, но на проектах, где я работаю - делают так.
• Скрипт build - построение сборки для продакшн.

Остальное осталось без изменений. Идем далее, создание файла webpack.config.js. Файл будет достаточно прост, в зависимости от режима вернет нам нужный модуль:

module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    return require('./webpack.development.config');
  }
  return require('./webpack.production.config');
}

Как вы наверняка уже догадались, понадобится еще два файла. Это webpack.development.config и webpack.production.config. Тут уже кто на что горазд, указываем плагины, модули с правилами, и все что есть сопутствующее. Готовые примеры можно найти в документации к webpack:

• Development
• Production

Пример для webpack.development.config (кстати, тут и указывается путь к index.js внутри entry):

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Development'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

какие-то общие правила можно вынести в webpack.common.js, чтобы не писать одни и те же строки в двух файлах. Надеюсь немного ясности я привнес в понимание ответа на ваш вопрос.

Webpack dev server не предназначен для сборки в продакшене. Сделайте 3 конфига как в официальном гайде: 1 - production, 1 - development, 1 - common. В development используйте webpack-dev-server, в production - собирайте обычным скриптом webpack --mode production. https://webpack.js.org/guides/production/