Как настроить webpack-dev-server?

Question

[Kir03]

Есть роуты

<Route exact path="/" component={Home} />
<Route exact path="/users" component={Users} />
<Route
	exact
	path="/users/create"
	component={UserCreate}
/>
<Route
	path={"/users/edit/:id"}
	component={UserEdit}
/>
<Route component={NotFound} />

Конфиг вебпак дев сервера

config.devServer = {
    contentBase: path.resolve(__dirname, "public"),
    compress: false,
    port: 9000,
    historyApiFallback: {
        index: "index.html"
    }
};

Output выглядит так

output: {
    path: path.resolve(__dirname, "public", "build"),
    filename: "bundle.js",
    publicPath: "/build/"
},

При обновлении страницы по адресу localhost:9000/users/edit/1 или localhost:9000/users/create выдает ошибку

Failed to load resource: the server responded with a status of 404 (Not Found)

Если попробовать открыть скрипт, то пишет:

Cannot GET /users/edit/build/bundle.js

Как я понял, у меня не правильно настроена сборка. Как верно настроить конфиг сервера?

Answer 1

[Антон Спирин]

config.devServer = {
    contentBase: path.resolve(__dirname, 'build'),
    compress: false,
    port: 9000,
    historyApiFallback: true,
};

output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/',
},

Путь до бандла из браузера:
localhost:9000/bundle.js

Comments

[Kir03]

Не помогло.

GET localhost:9000/users/edit/bundle.js net::ERR_ABORTED 404 (Not Found)

[Антон Спирин]

Kir03, путь до бандла из браузера должен быть:
localhost:9000/bundle.js, а не localhost:9000/users/edit/bundle.js
Вы как шаблон создаете?

[Kir03]

я без шаблона, у меня в папке public, лежит html

[Антон Спирин]

Kir03, ну хорошо. А как вы бандл подключаете?

[Антон Спирин]

Kir03, замените тег с бандлом на:
<script src="/bundle.js"></script>
Ну и надо copy-webpack-plugin подключить и копировать html в build

[Kir03]

Антон Спирин, Сработало.

[Антон Спирин]

Kir03, слеш подразумевает путь от корня. Если его нет, то путь строится от текущего пути в браузере.