如何配置 webpack 以支持某些主机中的虚拟路径？答案

【问题标题】：How do I configure webpack to support virtual paths in some hosts?如何配置 webpack 以支持某些主机中的虚拟路径？
【发布时间】：2019-05-08 10:53:13
【问题描述】：

我正在构建一个使用 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 文件引用的包非常有用，但插入带有 ASP.NET 将解析的虚拟路径标识符前缀的 href 值，但当任何包引用其他文件时它不起作用，比如图像。这些引用不会被 ASP.NET 解析，并且浏览器会尝试在 https://host/~/dist/images/cat.png 加载资源。

我希望所有资源都相对于应用程序根目录而不是主机根目录进行解析。

【问题讨论】：

标签： asp.net-core webpack-4

【解决方案1】：

~/ 路径构造不是标准的。 Razor 理解这意味着相对于文档根目录，并将其替换为有效的主机相对路径。但是，如果 Razor 未处理您正在执行的操作，那么您将无法使用它。

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

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

【讨论】：

Webpack 的资产解析希望使用主机相对路径，并假设您在构建时始终知道该路径。我看不到让它使用自相关路径的方法。有什么解决办法吗？
正如我所说，不。您所说的虚拟目录仅存在于您的 Web 服务器（例如 IIS）中正在运行的应用程序的上下文中。除此之外，没有办法知道或说出路径应该是什么。