Webpack Devserver: Open page in browser without typing '.html'

Question

I'm making a plain, static site (HTML/CSS/JS) with Webpack that I intend to eventually deploy to s3. I have my final HTML files exported to the root of my dist folder like, index.html, foo.html, bar.html.

When I go to localhost:9000, my index loads as expected. For foo and bar I have to type the file extension like /foo.html and /bar.html for those pages to load. Is there a setting that I'm missing that will allow me to simply type /foo and /bar in the browser and have the intended pages load?

`DevServer` is intended for testing HTML/JS/CSS. It’s not meant to meet your application’s server requirements and isn’t configurable to the point which you require. If you *absolutely* need this functionality, you’ve probably outgrown `DevServer`. — esqew, Jan 16 '22 at 22:39

score 2 · Accepted Answer · answered Dec 08 '22 at 17:04

One way I found for individual pages, is to specify a proxy using devServer.proxy. For /foo and /bar, this would look like that:

const path = require("path");

module.exports = {
  ...
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'dist')
    },
    port: 3000,
    open: false,
    hot: true,
    proxy: {
      '/foo': {
        target: 'http://localhost:3000/foo.html',
        pathRewrite: { '^/foo': '' }
      },
      '/bar': {
        target: 'http://localhost:3000/bar.html',
        pathRewrite: { '^/bar': '' }
      }
    }
  }
}

Check the DevServer documentation for more options.

score 0 · Answer 2 · answered Feb 09 '23 at 12:40

In addition to Nikolai's answer, in case you need your local dev server to serve urls w/o extensions in router history mode, just use the following:

    historyApiFallback: {
      rewrites: [
        { from: /^\/$/, to: '/views/landing.html' },
        { from: /^\/subpage/, to: '/views/subpage.html' },
        { from: /./, to: '/views/404.html' },
      ],
    },

Source: https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback

Webpack Devserver: Open page in browser without typing '.html'

2 Answers2