SomeKittens SomeKittens - 1 year ago 264
Javascript Question

Attempting to route a URL with a dot leads to 404 with webpack dev server

I'm using Webpack's dev server for ease of local development. I'm working on a single page app, so I've enabled


common.devServer = {
outputPath: path.join(__dirname, 'www', outDir),
historyApiFallback: true

However, whenever I try to browse to a url that contains a period (such as
), I get

Cannot GET /ui/alerts/map.postplay

How can I convince webpack-dev-server to let me use these urls?

Answer Source

UPDATE: You can now just set historyApiFallback to:

historyApiFallback: {
  disableDotRule: true

(thanks to BenR for fixing this!)

The trouble lies not in webpack-dev-server but the historyApiFallback config itself (technically, Webpack uses connect-history-api-fallback). There's a known bug relating to URLs with periods.

You can update the config for historyApiFallback to rewrite all urls containing periods:

historyApiFallback: {
  rewrites: [
    {from: /\./, to: '/'}

Since this operates on req.url, you should be fine even if you're doing local dev on something other than localhost via the hosts file, etc.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download