Олег Драпеза

Вы можете добавлять пути как параметры при билде.

В конфиге:

const API = process.env.api;

module.exports = {
    ...,
    plugins: [
        ...,
        new webpack.DefinePlugin({
            API_URL: JSON.stringify(API)
        })
    ]
}

И глобальная переменная API_URL будет доступна в коде вашего проекта.

Условный конфиг для сборки в вашем package.json:

{
  "scripts": {
    "build": "webpack --env.api=https://api.url/v1"
  }
}

Если надо на лету добавить:
npm run build -- --env.api=https://api.url/v2

Webpack-dev-server не пишет собранные файлы на диск, а хранит их в памяти. contentBase говорит только откуда брать статические файлы.

Надо именно такой адрес - добавьте output.publicPath: '/bundles/'

Лучше используйте HtmlWebpackPlugin, он сам создаст index.html + добавит ваш index.js на страницу.

В данный момент ваш index.js находиться виртуально в одной директории с index.html.

Webpack начинает искать файлы по неправильному пути, добавляет в начале /movie/ в вашем скрине.
Не могу точно сказать в чем проблема, давайте попробуем так:

Для начала замените output.filename: './dist/main.js' на:

output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }

А publicPath: '/dist/' на:
contentBase: path.resolve(__dirname, 'dist')

И css выделяйте так - new ExtractTextPlugin('[name].css'), output.path уже указывает, что надо выгружать все в dist

На самом деле, это как раз тот случай, когда надо изобретать велосипед)
Все что вы хотите - это просто конфиг вебпака и набор команд для запуска, dev и production.

Соответственно вам надо установить webpack и webpack-dev-server, показать откуда брать файлы, как обрабатывать (за это отвечают loaders), и куда их собирать - не поленитесь изучить вебпак, можете посмотреть этот скринкаст

Вот простой пример, я использую этот шаблон для изучения typescript.
Правда webpack 1 уже deprecated, но разница в конфиге не критичная, так что скринкаст все-равно актуален.

Нужен ES6 одновременно с typescript - добавляете babel-loader
Нужен css препроцессор - добавляете loader к этому препроцессору
Нужен линтинг - устанавливайте eslint и конфиги Airbnb

Добрый день!

Документация на html-loader

By default every local <img src="image.png"> is required (require('./image.png')). You may need to specify loaders for images in your configuration (recommended file-loader or url-loader).

То есть, атрибут src автоматически считается вызовом изображения.

Что бы изображение нашлось, во-первых в ваш source добавьте папку с изображениями, во-вторых начинайте пути с '/' (пример src="/img/omron2.png"), и изображения webpack будет искать относительно настройки:

resolve: {
    root: path.resolve(__dirname, 'source')
}

В папку build не нужно добавлять изображения вручную, воспользуйтесь file-loader или url-loader, они позволяют настроить и путь, например папка img внутри build, пример:

{
    test: /\.(png|jpg|jpeg|gif|svg)$/,
    loader:'file',
    query: {
        name: 'img/[name].[ext]'
    }
}