如何配置Webpack在某些主机中支持虚拟路径？

Question

我正在使用ASP.NET Core作为后端来构建一个应用程序，并为客户端运行一个React应用程序。我已经设置了webpack，以将SASS转换为CSS，将TypeScript转换为JavaScript，然后使用HtmlWebpackPlugin将这些捆绑软件添加到_Layout.cshtml文件中。分发包已发布到wwwroot/dist/

与我的本地开发托管服务器配合使用，一切都很好。当我尝试在虚拟目录中运行应用程序时，挑战就来了（某些部署的要求）。 ASP.NET将基于托管信息将虚拟路径解析为完整路径（例如~\resource解析为\virtual-directory\resource），但是webpack资源被编译为固定路径。

我尝试设置publicPath属性以生成虚拟路径：

output: {
    path: path.resolve(__dirname, 'wwwroot/dist'),
    publicPath: '~/dist/'
}

虽然这对我的_Layout.cshtml文件所引用的捆绑包非常有效，但是插入了href前缀为ASP.NET可以解析的虚拟路径标识符的值，但在任何捆绑包中均不起作用引用其他文件，例如图像。这些引用不会被ASP.NET解析，浏览器会尝试在https://host/~/dist/images/cat.png上加载资源。

我想要的是相对于应用程序根目录而不是主机根目录解析所有资源。

Answer 1

~/路径构造不是标准的。 Razor理解这是指相对于文档根目录，并用有效的主机相对路径代替它。但是，如果Razor不在处理您的工作，那么您将无法使用它。

您能做的最好的事情就是自相关路径（path/to/file，即前面没有/）或主机相关路径（/path/to/file，即前面有/ ）。在前一种情况下，将从上下文中的文件路径解释路径。例如，如果路径在JS文件中，则该路径将相对于该JS文件所在的位置。在后一种情况下，它将相对于主机，即主机的完整路径，包括任何虚拟目录。

您无需使用其他任何东西，因为文件系统实用程序（例如webpack）中没有应用程序根目录的概念。该概念仅存在于正在运行的应用程序的上下文中。