Question

我希望webpack dev服务器为所有尚未拥有的资源请求添加一个尾部斜杠。

例如：
我的索引位于/my/project/root/index.html
我可以通过webpack dev服务器访问它 1. /my/project/root和
2. /my/project/root/（请注意此处的斜杠）

我希望将1的请求重定向到2。

我已经尝试过historyAPIFallback选项，但是您可以提供给该选项的重写只传递请求，它们不会更改网址。

是否可以使用webpack dev服务器重定向请求？

Answer 1

您可以利用 webpack 的 devServer.historyApiFallback 和 connect-history-api-fallback 来附加尾部斜杠。

webpack.config.js

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      rewrites: [{ from: /^.*[^/]$/, to: (context) => `${context.parsedUrl.pathname}/` }],
    },
  },
};

哪里

rewrites: [{ from: /^.*[^/]$/, to: (context) => `${context.parsedUrl.pathname}/` }]

表示在任何没有斜杠的网址后附加一个斜杠。

另外，一个具有以下属性的上下文对象：

parsedUrl: Information about the URL as provided by the URL module's url.parse.
match: An Array of matched results as provided by String.match(...).
request: The HTTP request object.

注意：如果您的 CANNOT GET <URL> 是 webpack.output.publicPath 或 auto，上述答案可能会在网页上引发 / 错误。在这种情况下，只需执行以下操作：

rewrites: [{ from: /^.*[^/]$/, to: '/' }]

如何让webpack dev服务器附加一个尾部斜杠？

1 个答案: