Webpack 和两个不同来源的网站

Question

我正在使用webpack。我有两个项目，一个是前端项目，一个是后端项目。后端也是使用javascript。所以我使用webpack来打包后端。

打包后的后端文件如下：

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

test1、test2和test1~test2.js文件是按需加载的分块文件。

现在，我正在输入前端网站的URL（URL为front-end.website.com/test1），当这种情况发生时，我立即下载main.js和test1.js。之后，有一个按钮，我应该点击它，然后axios应该发出请求来获取test1~test2.js。正如你所看到的并且我所说的那样，test1~test2.js应该被懒加载，这也是发生的事情，但是...

问题：当请求test1~test2.js时，请求并没有发送到后端源，而是发送到前端源，这导致该文件无法加载，因为该文件不存在于前端上。看起来在main.js中，有一个懒加载的代码用于test1~test2.js，但它没有完整的源路径，当前端尝试加载它时，它认为它应该从自身加载。

我该如何解决这个问题？

解决方法（但我不喜欢这种方法）：我尝试在后端的webpack配置中使用publicPath，例如：https://back-end.website.com，但这会导致当请求被发送到后端时，无论是哪个文件，请求的实际URL变成了https://back-end.website.com/http://back-end.website.com/file（类似于这样）。

- Nika Kurashvili

---

这并不是一个实际的后端，而只是一个JavaScript应用程序。纯JS。某种第三方工具。 - Nika Kurashvili

看起来你只需要两个独立的Webpack任务，这是构建多个包的一个相当标准的方式。 - Mike 'Pomax' Kamermans

我有两个独立的项目/两个独立的webpack配置。问题在于，当通过axios从一个项目获取文件并且该文件还要求来自另一个项目的另一个文件时，该另一个文件会从第一个项目请求，而不是从另一个项目请求。明白我的意思吗？ - Nika Kurashvili

现在更有意义了，但请注意你突然提到了axios，而你在帖子中或标签中都没有提到。因此，根据这些信息，值得更新您的帖子以更详细地解释您的设置。 - Mike 'Pomax' Kamermans

展示一些前后端的代码示例会非常有帮助。 - Firanolfind

Answer 1

这是一个非常不寻常的设置，不是普通的代码拆分。后端生成的文件似乎是XHR (axios或其他方式)的响应，而您正在尝试实现的是代码拆分。

如果像您所示的那样使用 axios 获取文件，则可以将后端 URL 添加到 axios 请求中。

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

前端文件不会被axios获取。如果它们确实被获取，请创建两个axios实例。

- Kevin Farrugia