webpack and two different origin websites

Question

I am using webpack. I have two projects. one for front-end. one for back-end. back-end is also on javascript. So I bundle the back-end with webpack.

The files I get after bundling back-end is:

1. main.js
2. test1.js
3. test2.js
4. test1~test2.js

test1, test2 and test1~test2.js files are on-demand chunk files.

Now, I am entering the url of the front-end website, (url is front-end.website.com/test1), when that happens, I am downloading main.js and test1.js immediatelly. After that, There's a button on which I should click and after clicking, axios should make the request to fetch test1~test2.js. As you see and as I said, test1~test2.js should be loaded lazily and that's what happens, but.....

The problem: When the request for test1~test2.js happens, the request doesn't get made to back-end origin, but for the front-end origin and this causes the file not to be loaded as this file doesn't exist on front-end. Looks like in main.js , there's a lazy loaded code for test1~test2.js but it doesn't have the whole origin path and when front-end tries to load it, it thinks that it should load from itself.

How can I fix that?

The workarounds (but i hate this) : I tried to use publicPath in my back-end's webpack config such as: https://back-end.website.com, but what this causes is that when requests get made to back-end, doens't matter for which file, the actual url for the request becomes https://back-end.website.com/http://back-end.website.com/file (something like that).

Answer 1

This is a very unusual setup and not ordinary code-splitting. The files generated by the backend seem to be the response of an XHR (axios or otherwise), while the implementation you are trying to do looks like code-splitting.

If the files are fetched by axios as you indicate, then you can add the backend URL to the axios request

const instance = axios.create({
  baseURL: 'https://back-end.website/',
});

The front-end files wouldn't be fetched by axios. In the unlikely scenario that they are, create two axios instances.