CODEWITHSUNDEEP
javascriptwebpackwebpack-dev-server
bill-lamin
bill-lamin

Reputation: 343

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

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?

Upvotes: 1

Views: 629

Answers (2)

Kirill Kay
Kirill Kay

Reputation: 901

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

Upvotes: 0

Nikolai Janakiev
Nikolai Janakiev

Reputation: 366

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.

Upvotes: 2

Related Questions