CODEWITHSUNDEEP
javascriptwebpackassetswebpack-file-loader
James Donnelly
James Donnelly

Reputation: 128836

Assets only correctly map up when my application isn't hosted on a pre-existing path

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:

My dist/build folder

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?

Upvotes: 0

Views: 27

Answers (1)

James Donnelly
James Donnelly

Reputation: 128836

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.

Upvotes: 1

Related Questions