Is it possible to have `publicPath` configured dynamically in the browser with webpack?

Question

I've got a project where I deploy the same webpack JS bundle to multiple different environments. Some environments use a CDN to serve static assets like JS files, and some do not and just have static assets served from the same root as the rest of the project.

This project also has multiple async webpack chunks, and so I define a publicPath for them to be correctly loaded.

When deploying to non-cdn, webpack works fine with a statically configured publicPath in my webpack config serving everything from something like /static/.

However when deploying to environments that use a CDN, this no longer works for async chunks, because webpack will try to access these from /static/ which means they ask the main app server and not the CDN.

Clearly I can re-build the project with my CDN in publicPath to solve this issue. However, I'd prefer to be able to use just one deployment package in both situations.

My server-side app provides a javascript global detailing the CDN root path, along the lines of window.staticCDNRoot. And this global is also present in non-cdn situations, just pointing back to the app server - so it always resolves to the correct location to load static assets from.

Is there any way I can get webpack to utilize this at runtime so that publicPath becomes window.staticCDNRoot + publicPath without huge hackery?

Or is there a better solution to this issue?

Answer 1

Okay so I was looking for this all day and then found it just after deciding to post here!

Just in case anyone else needs this:

The solution is to define __webpack_public_path__ at runtime when making a production build. But be careful not to use it in development as it can mess up module hot-loading.

More info here:

http://webpack.github.io/docs/configuration.html#output-publicpath

Answer 2

I can suggest to use the plugin at https://github.com/agoldis/webpack-require-from that I have created specifically for that purpose