hard to configure the index html path to be relative to the publicPath

[jharris4]

Modification Proposal

Expected Behavior / Situation

It is quite common to need to have webpack bundle an app such that the index.html is in the parent directory which contains a subdirectory for the rest of the assets, such as the following directory structure:

/index.html
/static/app-bundle.js
/static/app-bundle.css

The webpack.config.js for the above looks like this:

module.exports = {
  output: {
    publicPath: '/static/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: '../index.html'
    })
  ],
  devServer: {
    historyApiFallback: true
  }
};

This works fine for production builds, but in development mode, webpack-dev-server fails to find the index.html file and all requests to the server result in 404 responses.

Actual Behavior / Situation

After much experimentation, I was able to modify the webpack.config.js to get the index.html serving properly like this:

module.exports = {
  output: {
    publicPath: '/static/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: '../index.html'
    })
  ],
  devServer: {
    historyApiFallback: {
      index: '/static/../index.html'
    }
  }
};

It would be really nice if historyApiFallback: true did the logical thing for this case, without requiring the following workaround:

historyApiFallback: {
  index: `${publicPath}${htmlPluginOptions.filename}`
}

Please paste the results of npx webpack-cli info here, and mention other relevant information

System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 1.42 GB / 32.00 GB
  Binaries:
    Node: 16.9.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 7.21.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Firefox: 94.0
    Safari: 15.2

[alexander-akait]

Set publicPath: 'auto'

[jharris4]

setting publicPath: 'auto' on either output or historyApiFallback doesn't seem to work.

[alexander-akait]

I recommend do not have index.html in root at all, due to this you need workaround, I don't think we can fix it without breaking change and it will break other cases

[webholics]

Run into the exact same problem. Seems like quite a heavy hack for such a simple use case.

[shanu106]

set publicPath: 'auto'

[alexander-akait]

Let's close, please set publicPath: 'auto', but better avoid having index.html in the root, like I said before - #4231 (comment)