仅当我的应用程序未托管在预先存在的路径上时，资产才能正确映射

Question

I'm developing an application for use on multiple client sites. These are hosted either as a subdomain or as a path (which I have no control over), like so:

1. https://application.example.com/#/example-page
2. https://example.com/application/#/example-page

Here is my Webpack 1 config:

module: {
  loaders: [
    {
      ...
    },
    {
      test: /\.(woff2?|eot|svg|ttf|md|jpg|png)$/,
      loader: 'file?name=[hash].[ext]'
    }
  ]
},
output: {
  path: __dirname + "/dist/build/",
  filename: "app.min.js"
}

With this, my assets get compiled into a /build/ folder which also contains the main application JavaScript file:

The issue I'm having is that the compiled assets aren't found if the application is hosted on a pre-existing path (URL example 2 above) but load perfectly fine if no path exists. Doing some debugging reveals that for whatever reason the /build directory must be specified for assets to load on the second URL example, but specifying /build breaks the first URL example:

1. https://application.example.com/compiled-asset.png ✓
2. https://example.com/application/compiled-asset.png ⇐ 404
3. https://application.example.com/build/compiled-asset.png ⇐ 404
4. https://example.com/application/build/compiled-asset.png ✓

What am I doing wrong here?

Answer 1

Seems the answer to this is to add the publicPath property to the loader itself as following:

loader: 'file-loader?name=[hash].[ext]&publicPath=./build/'

I had previously attempted this with a separate publicPath property, but this didn't achieve anything.