Почему webpack-dev-server не отдаёт бандл для index.hmtl?

Question

[Артём Щурин]

Доброго дня
Решил завести webpack dev server, конфиг заводится, index.html получаю
Но для бандлов подключенных на странице получаю 404
Бандл на страницу подключен:

<script type="text/javascript" src="bundles/index.js"></script>

Структура проекта:


Конфиг:

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        index: './entry_points/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.join(__dirname, '/bundles/')
    },
    watchOptions: {
        pull: true,
        ignored: /node_modules/
    },
    devServer: {
        contentBase: path.join(__dirname),
        historyApiFallback: true,
        port: 9002
    }
};

Comments

[Максим]

на всякий случай, попробуйте src="/bundles/index.js"

[Артём Щурин]

Так же не работает
Подозреваю, что всё из-за того, что webpack бандлы держит в памяти, а ссылаюсь на пустую директорию
Но как это исправить не знаю

Answer 1

[Олег Драпеза]

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

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

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

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