如何在某些主机上配置webpack以支持虚拟路径？

Question

我正在构建一个使用ASP.NET核心作为后端的应用程序，并运行一个用于客户端的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文件引用的包很有效，插入以ASP.NET将解析的虚拟路径标识符为前缀的href值，但是当任何包引用其他文件时，它就不起作用了。这些引用不会被ASP.NET解析，浏览器会尝试加载https://host/~/dist/images/cat.png上的资源。

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

Answer 1

~/路径构建不规范。Razor将其理解为相对于文档根目录的意思，并将其替换为有效的主机相对路径。然而，如果你正在做的事情没有被Razor处理，那么你就不能使用它。

您最多只能使用自相对路径(path/to/file，即没有前面的/)或主机相对路径(/path/to/file，也就是前面的/)。在前一种情况下，将根据上下文中文件的路径来解释路径。例如，如果路径在JS文件中，那么它将相对于该JS文件所在的位置。在后一种情况下，它将是相对于主机的，即来自主机的完整路径，包括任何虚拟目录。

您不需要使用其他东西，因为在像webpack这样的文件系统实用程序中没有应用程序根的概念。该概念仅存在于正在运行的应用程序的上下文中。