How to setup webpack-dev-server?

Question

React

There are routes

<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} />

webpack dev server config

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

output looks like this

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

When refreshing a page at localhost:9000/users/edit/1 or localhost:9000/users/create it gives an error

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

When I try to open the script, it says:

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

As I understand it, my assembly is not configured correctly. How to correctly configure the server config?

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: '/',
},

Path to the bundle from the browser:
localhost:9000/bundle.js